css3 стрела с тенью

Question

Эй в настоящее время у меня есть этот CSS, чтобы произвести Css стрелку, но я не могу показаться, чтобы получить падающую тень на него какие-либо идеи

.arrow { 
    width: 0px; 
    height: 0px; 
    border-style: solid inset; 
    border-width: 10px 78px 0 78px; 
    border-color: #000 transparent transparent transparent; 
    z-index: 1; 
} 

я баловался с: после и: прежде, но с никакого успеха

Answer 1

Поскольку ваша стрелка будет находиться под твердым прямоугольником, это может помочь вам

.demo { 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    width: 200px; 
    height: 50px; 
    clip: rect(0px 400px 100px 0px);  
} 
.demo:after { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    -webkit-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    -moz-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    box-shadow: 30px 1px 6px blue; 
} 

fiddle compared with your original arrow

Проблема заключается в том, что тень не может идти вверх, но обычно эта конструкция Wouldn» Так или иначе.

Кроме того, базовый div сильно искажен, поэтому вам нужно будет установить тень методом проб и ошибок.

Answer 2

http://css-tricks.com/triangle-with-shadow/

Я думаю, что это то, что вы ищете, это не объясняет два способа, чтобы получить тень на стрелки с помощью CSS.

Одним из них является использование символа треугольника Юникода и применение тени к нему, а другое - использование CSS-обмана с помощью: после селектора и преобразования CSS.