[CSS] リンクのクリックエリアを斜め（平行四辺形）に切り出したい

公開日:2024/08/08 更新日:2024/11/10

斜線を多用したデザインのウェブサイトでは、平行四辺形のボタンを設置したい場合があります。
見た目だけでなく、リンクのクリックエリアも斜めに切り出したい場合、clip-pathプロパティを使用するのが有効です。

サンプルコード

html

<a href="#1" class="naname1">テスト</a>
<a href="#2" class="naname2">テスト</a>
<a href="#3" class="naname3">テスト</a>

CSS

.naname1 {
    display: inline-block;
    padding: 90px;
    background-color: #3388dd;
    clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.naname2 {
    display: inline-block;
    padding: 90px;
    margin: 0px 0px 0px -90px;
    background-color: #3388dd;
    clip-path: polygon(90px 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.naname3 {
    display: inline-block;
    padding: 90px;
    margin: 0px 0px 0px -90px;
    background-color: #3388dd;
    clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

clip-pathは、カンマ区切りでX、Y座標のセットを複数個指定して使用します。
座標は時計回りで順々に指定します。下記の例では、
①左上：X=0 ※左端、Y=0 ※上端
②右上：X=100% ※右端、Y=0 ※上端
③右下：X=calc(100% - 90px) ※右端から90px左にずらした位置、Y=100% ※下端
④左下：X=0 ※左端、Y=100% ※下端
という順番で座標を指定しています。

clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。