どうも！LSSです！！
CSSプロパティの一覧を検索していると、たまたま見つけました。
CSSで↑のような特殊な形状を表現できるんだ！？と。
これまで、CSSで三角を表現しようと思ったら、
こんな感じでborderをいじって…というやり方でしたが、CSSシェイプを使うと三角でも五角で六角でも、星型でも表現できちゃうようです。
コード
<style><!--
.cp{
background-color:lightgreen;
clip-path:polygon(0% 50%,10% 60%,10% 0%,100% 0%,100% 100%,10% 100%,10% 80%);
padding-left:12%;
}
--></style>
<div class="cp">まさかこんな事が…</div>
コードのうち、形状を作っているのは、
clip-path:polygon(0% 50%,10% 60%,10% 0%,100% 0%,100% 100%,10% 100%,10% 80%);
この部分のみです。
頂点座標を%で指定していて、「X座標 Y座標 , X座標 Y座標 , X座標 Y座標 , …」という感じに位置指定を繰り返す事で、それらを順に繋いだ形状が作られます。
ただし、clip、つまり「切り出し」になるので、
padding-left:12%;
で左側のみ余白を設けて、文字が枠内に収まるように調整する必要があります。
これがないと例えば…
<div style="background-color: lightgreen; clip-path: polygon(0% 50%,10% 60%,10% 0%,100% 0%,100% 100%,10% 100%,10% 80%);">あいうえおかきくけこさしすせそ</div>
みたいなコードだと、
ってなっちゃうんですねｗ
他にも色々できるみたい
吹き出しを作る他にも、画像を特殊形状で切り出すとか、floatと組み合わせて凝った文字配置が出来たりするようです。
文字配置と言えば、「shape-outside」というプロパティがありますが、「shape-inside」が今のところ無い（将来的に実装？）そうで、もしそれが実装されたらpaddingによる調整が不要になりそうですね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
