「 Creating rounded triangles in CSS with clip-path | CodyHouse」という記事で clip-pathを使うと三角に枠線どころか角丸も適用できることを知りました。すごい！え、二年前から知ってる？あ、そう…でも専用の Mixin を作ったし、吹き出しも作ってみたので、とりあえず載っけておきますね…。
枠線付き角丸三角で吹き出しを作る
HTML はこんなんです。
<divclass="baloon">うんち</div>Sass の Mixin がこちら。必要最低限です。
@mixintriangle($direction){clip-path:polygon(00,100%100%,0100%);@if$direction==up{transform:rotate(135deg);}@elseif$direction==down{transform:rotate(-45deg);}@elseif$direction==left{transform:rotate(45deg);}@elseif$direction==right{transform:rotate(-135deg);}}ちょっと長くなってしまいましたが、 Sass がこちら。吹き出し用の Mixin を別途用意しても良いかもしれません。
.baloon{background-color:#ffffff;border:8pxsolid#000000;border-radius:1rem;box-sizing:border-box;margin:4rem;position:relative;width:32rem;height:16rem;&::after{@includetriangle(down);background-color:inherit;border:inherit;border-radius:0001rem;box-sizing:border-box;content:"";display:block;margin-left:-2rem;position:absolute;left:50%;bottom:-2rem;width:4rem;height:4rem;}}これで扉画像のような吹き出しができるはずです。
ただし、 &::afterの widthと heightには同じ値を設定する必要がある…と思います。詳しい説明は こちらの記事へどうぞ（丸投げ）。
あと px以外の単位だと、描画に若干のズレが生じるかもしれません。それな。
普通の三角 Mixin
@mixintriangle($direction){@if$direction==up{clip-path:polygon(0100%,100%100%,50%0);}@elseif$direction==down{clip-path:polygon(00,100%0,50%100%);}@elseif$direction==left{clip-path:polygon(100%0,100%100%,050%);}@elseif$direction==right{clip-path:polygon(00,0100%,100%50%);}}この方法だと枠線も角丸も適用できませんが、 widthと heightに別々の値を設定できます。適材適所。
