Тень в CSS Треугольник

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, но, вероятно, предполагается, что он работает на блочной модели и, вероятно, не будет вычислять геометрию, созданную границами.