Drop Shadow В CSS Triangle

Question

Я создал по существу большую стрелку, указывающую вправо.

<div style=" 
font-size: 0px; line-height: 0%; width: 100px; 
border-bottom: 80px solid #8cb622; 
border-right: 62px solid #dadbdf; 
"></div> 


<div style=" 
font-size: 0px; line-height: 0%; width: 100px; 
border-top: 80px solid #8cb622; 
border-right: 62px solid #dadbdf; 
"></div> 

Теперь я знаю, что это не «правильно», но я просто тестирую прямо сейчас.

Мне интересно, есть ли способ, которым я могу использовать эту технику границы, и по-прежнему помещать тень на передний нижний край стрелки. Я думал о том, чтобы разместить под ним еще один div, но для этой техники работы другие границы должны быть видны.

Если это невозможно сделать с использованием техники границ, я вынужден использовать изображение в качестве передней части этой стрелки.

Благодаря

Answer 1

Вы можете рассмотреть возможность использования Canvas, чтобы сделать это, который работает кросс-платформенный очень хорошо с ExplorerCanvas Включена для совместимости с MSIE (и, конечно, поддерживается изначально в WebKit & Gecko).

Answer 2

Я считаю, что это box-shadow, но это, вероятно, предположить, что это работает на блочной модели и, вероятно, не будет вычислять геометрию, созданную границами.