これを達成する別の方法、特に私が行ったように正三角形または斜角三角形で作業するためにこれを必要とする人にとってfilter: drop-shadow(...)
、複数の値を使用してぼかし半径を使用しない方法があります。これには、複数の要素を必要としない、または:beforeと:afterの両方にアクセスする必要がないという追加の利点があります(インラインの:afterコンテンツでこれを達成しようとしていたため、絶対配置も避けたかった)。
上記の場合、:afterのCSSは次のようになります(フィドル)。
.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>
上記の2番目の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>
最初のもの(緑)は1回適用されますが、2番目のもの(赤)は、境界線を介して作成された黄色の三角形と緑の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);
最初の1つはぼかし半径セット(この場合は2.5px、結果は乗算されているように見えます)があり、残りはすべて0でぼかしを持っています。しかし、これはすべての面で同じ色に対してのみ機能し、結果は丸みを帯びたコーナーやかなり粗いエッジでは、大きくするほど大きくなります。