【HTML/CSS】clip-path: polygonを使い疑似要素の三角形や多角形を作るデザインテクニック

■参考にさせていただいた記事

【CSS】ボーダーを使わないclip-pathで作る三角形 | WEBデザインブログ

■目標物

■コード

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」が０％です、この3点を繋ぐと二等辺三角形が出来上がります。