Еще один способ сделать это, особенно для тех, кому необходимо это для работы с равносторонними или даже разносторонними треугольниками, как я, - это использовать filter: drop-shadow(...) с несколькими значениями и без радиуса размытия. Это дает дополнительное преимущество: не требуется нескольких элементов или доступа к обоим : before и: after (я пытался сделать это с помощью: after содержимого, которое было встроенным, поэтому хотел также избежать абсолютного позиционирования).
В приведенном выше примере CSS: after может выглядеть следующим образом ( fiddle ):
.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> во второй приведенной выше тени () выглядит больше на 1px, чем 1px, хотя я думаю, что это связано с тригонометрией (хотя бы на моем мониторе) Я не вижу разницы между фактическими значениями, основанными на триггере, или .5px или даже .1px в этом отношении).
- Границы больше 1px (ну, их внешний вид таким образом), похоже, не работают хорошо. Или, по крайней мере, я не нашел решения, хотя см. Ниже неоптимальный способ пойти немного дальше. (Я бы подумал, что задокументированный, но не поддерживаемый 4-й параметр (
<spread-radius>) drop-shadow () может быть тем, что я действительно ищу, вместо нескольких значений фильтра, но добавление его просто сломало вещи полностью.) Здесь вы можно увидеть, что начинает происходить при выходе за пределы 1px ( fiddle ):
.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).
Но я думаю, что вы можете воспользоваться этими тенями, если вам нужно что-то более широкое, чем 1px, изменив их на что-то вроде следующего ( fiddle ):
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. Но это будет работать только для одного цвета со всех сторон, и это приводит к некоторым округлым углам, а также к довольно грубым краям, чем больше вы идете.