完成此操作的另一种方法,尤其是对于需要像我这样处理等边三角形甚至斜角三角形的人来说,是使用filter: drop-shadow(...)
多个值且没有模糊半径。这具有不需要多个元素,或获得额外的好处都:前:后(我试图用做到这一点:这是内嵌的内容,所以要避免绝对定位太后)。
对于上述情况,:after的CSS可能如下所示(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中看起来不错)
- 我不太确定为什么上面
<offset-y>
第二个drop-shadow()中的.5px 值看起来比1px看起来更像1px,尽管我想它与三角学有关(尽管至少在我的显示器上我看不到两者之间没有区别)实际基于触发的值,或者说.5px甚至.1px)。
- 大于1px的边框(看起来像那样)似乎效果不佳。或至少我还没有找到解决方案,不过下面介绍了一种不太理想的方法来扩大规模。(我认为
<spread-radius>
drop-shadow()的文档化但不受支持的第4个参数()可能是我真正想要的,而不是多个过滤器值,但是将其添加进去只是使事情完全破裂。)在这里您可以看到什么超过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>
注意第一个(绿色)被应用一次,但第二个(红色)被应用到通过边框创建的黄色三角形以及绿色drop-shadow()和最后一个(蓝色)被应用的有趣之处。应用于以上所有内容。(也许这也与.5px外观有关)。
但是我猜想,如果您需要比1px宽的东西,可以通过将它们更改为以下内容(小提琴)来利用彼此之间建立的这些阴影:
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.5px,尽管结果看起来成倍增加了),其余所有的模糊都设置为0。但这仅适用于所有颜色相同的颜色,并且结果在某些圆角以及相当粗糙的边缘上,您走的越大。