Тень коробки для треугольника, созданного с помощью css

У меня есть следующий плункер, в котором я создал треугольник с помощью CSS.

CSS:

.triangle {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
}

HTML:

<div class="triangle">
</div>

В моем проекте AngularJS этот треугольник создается, когда я вызываю директиву раскрывающегося списка, как определено здесь.

Проблема в том, что я хочу придать этому треугольнику и раскрывающемуся всплывающему меню тень окна. Я могу применить его во всплывающем окне (по сути, это просто список «ul»), но я борюсь с треугольником. Как я могу применить тень к треугольнику?


html css angularjs box-shadow angular-foundation
person Tarun Dugar    schedule 19.10.2015    source источник
comment
Возможный дубликат -webkit-filter: drop-shadow для других браузеров   -  person Pete    schedule 19.10.2015

Ответы (2)


arrow_upward
2
arrow_downward 

.triangle {
  position: relative;
  margin: 0;
  box-sizing: border-box;
  background: red;
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 6px solid black;
  border-color: transparent transparent red red;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="triangle">
      
    </div>
  </body>

</html>

Вот HTML и CSS для создания желаемого эффекта.

person Enkode    schedule 19.10.2015
comment
Хорошая работа, использование поворота, чтобы обойти ограничения текущего CSS. Слава! - person klaar; 19.10.2015

arrow_upward
-1
arrow_downward

Поскольку треугольник на самом деле является хаком (три из четырех границ блочного элемента прозрачны), свойство box-shadow не будет работать должным образом, потому что оно по-прежнему видит элемент, к которому вы применяете этот «хак», как прямоугольный, поэтому box-shadow применяется соответственно.

Результат находится в этой скрипте.

.triangle:before {
    border: inset 6px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent red transparent;
    border-bottom-style: solid;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 89;
    box-shadow: 0px 0px 2px 2px #AAA;
}
    <div class="triangle">
      
    </div>

person klaar    schedule 19.10.2015