Другой способ добиться этого, особенно для тех, кому это нужно для работы с равносторонними или даже равносторонними треугольниками, как это сделал я, - использовать filter: drop-shadow(...)с несколькими значениями и без радиуса размытия. Это дает дополнительное преимущество в виде отсутствия необходимости в нескольких элементах или доступе к обоим. : before и: after (я пытался добиться этого с помощью: after контента, который был встроенным, поэтому также хотел избежать абсолютного позиционирования).
В приведенном выше случае CSS: after может выглядеть так ( скрипка ):
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
Test Container
</div>
Я думаю есть некоторые ограничения или странности:
- Нет поддержки в IE11 (хотя выглядит нормально в FF, Chrome и Edge)
- Я не совсем понимаю, почему .5px для
<offset-y> значения во втором drop-shadow () выше больше похоже на 1px, чем на 1px, хотя я предполагаю, что это связано с тригонометрией (хотя, по крайней мере, на моем мониторе я не вижу разницы между фактические значения на основе триггеров или 0,5 пикселей или даже 0,1 пикселей, если на то пошло).
- Границы больше 1 пикселя (ну, их внешний вид), похоже, не работают. Или, по крайней мере, я не нашел решения, хотя см. Ниже не совсем оптимальный способ сделать немного больше. (Я бы подумал, что документированный, но неподдерживаемый 4-й параметр (
<spread-radius>) drop-shadow () может быть тем, что я действительно ищу, а не несколькими значениями фильтра, но добавление его просто полностью сломало.) Здесь вы можете увидеть, что начинает происходить при выходе за пределы 1px ( скрипка ):
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
Test Container
</div>
Обратите внимание на забавность того, что первый (зеленый) применяется один раз, а второй (красный) применяется как к желтому треугольнику, созданному через границу, так и к зеленой тени (), и к последнему (синему) применяется ко всему вышеперечисленному. (Возможно, это также связано с внешним видом .5px).
Но я думаю, вы можете воспользоваться преимуществами этих падающих теней, накладывающихся друг на друга, если вам нужно что-то более широкое, чем 1 пиксель, изменив их на что-то вроде следующего ( скрипка ):
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
где у самого первого установлен радиус размытия (2,5 пикселя в данном случае, хотя результат кажется умноженным), а у всех остальных есть размытие на 0. Но это будет работать только для одного и того же цвета со всех сторон, и в результате в некоторых закругленных углах, а также на довольно неровных краях, чем больше вы идете.
