問題
cssのみで三角形を作りたい。
解決策
「width: 0; height: 0;」の要素を作り、borderの一辺以外を「transparent」で透過させる。
cssによる三角形の実現
簡易的な吹き出しなどで、三角形のパーツを使用する場面はよく遭遇するのではないでしょうか。
そんな時、cssで三角形を作り、作業の負担を軽減させましょう！
まず、HTMLの構築を行います。
divタグを構築します。
便宜上、ここではdivタグに「triangle」というクラスを設定しています。
<div class="triangle">
<p>下に三角形を表示させます。</p>
</div>次にCSSの構築を行います。
divタグのクラス「triangle」に、「position: relative;」を設定します。
そして疑似要素afterを構築します。
「position: absolute;」で位置を調整し、幅も高さも0にして、「border」を設定します。
「border」はtop以外は「transparent」に設定して透過させます。
.triangle{
position: relative;
padding: 10px 15px;
background-color: #fef5f2;
}
.triangle:after{
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
right: 0;
bottom: -50px;
left: 0;
margin: auto;
border-top: 25px solid #FCECE8;
border-right: 10px solid transparent;
border-bottom: 25px solid transparent;
border-left: 10px solid transparent;
}
DEMOはこちら
下に三角形を表示させます。
ポイント!
「border」で一辺以外を透過させることで、線が斜めに切り取られ、三角の形状で出力されます。
上向きの三角形を作りたい場合は、bottom以外を「transparent」で透過すれば実現することができます。
応用の仕方次第で色々な場面で使えますので、ぜひ試してみてください。
コメント