よくランディングページなどで見かける、こういうページをスタイルシートで作ってみたので共有します。画像は使っていません。
ボタンで表示を切り替えてご覧ください。
HTML
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
CSS
[class^="triangle"]::after{ |
border-right: 50vw solid transparent; |
border-left: 50vw solid transparent; |
[class^="triangle"] + div{ |
border-top: 80px solid #C2E5FB; |
border-top: 80px solid #DDFCD0; |
border-top: 80px solid #FCFBCE; |
作り方は、下記の三角形の作り方の原理を応用してます。
2018.05.08ここでは吹き出しなどのデザインでよく使われている三角形の仕組みについて見ていきます。今まで何となくCSSの三角形を理解してきた方もここでその仕組みが明確に理解できるようになる！かどうかは分かりませんが、少しはお役に立てると思います。
CSSのborder...
スタイルシートを編集していてネックになったのが、borderの幅がパーセントで指定できなかったという点です。パーセントで指定できれば左右を50%にするだけで完成できそうですが、それができなかったので50vwで指定してあります。vwというのは、画面の表示領域全体の幅に対する割合でサイズを指定する単位です。
上記の理由から、ページの両サイドに余白を入れずに100%で表示させることを想定してありますので、余白を入れてしまうと三角形の先端がずれてしまうのをお気をつけください。
