【HTML/CSS】clip-path: polygonを使い疑似要素の三角形や多角形を作るデザインテクニック
■参考にさせていただいた記事
■目標物
■コード
HTML
<li class="content">
<a href="#">
<img src="images/icon-document.png" alt="">
<p>資料請求</p>
</a>
</li>
CSS
※重要な部分だけ抜粋
clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
&::before {
position : absolute;
content : "";
bottom : 4px;
right : 4px;
height : 20px;
width : 20px;
background : $mainColor;
clip-path : polygon(0% 100%, 100% 100%, 100% 0%);
}
■解説
まず「疑似要素」を作成したいので"oisition: absolute"で絶対指定し、
"bottom"と"right"で配置したい場所に固定します。
そこから"height"と"width"で「正方形」を作成し、
”clip-path”プロパティの値である”polygon”を使います。
・最初の0% 100%
これはX軸のスタート地点は動かさず、Y軸は100%の場所
・2番目の100% 100%
次は「X」も100%、これで2点目は左から右に移動
・3番目の100% 0%
次は「Y」が0%です、この3点を繋ぐと二等辺三角形が出来上がります。
この記事が気に入ったらサポートをしてみませんか?