【CSS】CSSで平行四辺形のボタンを作る方法

2023年12月 6日　Posted　遠藤(フロントエンドエンジニア)

今回はCSSのみで平行四辺形のボタンを作る方法を紹介します。
少し斜めになったデザインなど、実装する際に画像を使用していませんでしょうか。実はCSSのみで簡単に平行四辺形を作ることができます。

CSSで平行四辺形を作る方法

CSSのtransformのskewXを使うことで実装できます。たったこれだけです。

transform: skewX();

skewXはCSSの関数で、要素を水平方向にゆがめる（ななめにする）指定をすることができます。
skewX()でななめにする角度をdegで指定します。

transform: skewX(-45deg);

degはdegreeを略したもので角度を意味します。例えば45度であれば45degと指定します（反対方向に45度であれば-45degと指定します）。
あとは簡単で、transform: skewX();をななめにしたい要素に指定するだけです。

実装例）
.octopus {
    width: 100px;
    height: 50px;
    background-color: red;
    transform: skewX(-35deg);
}

こちらの指定で以下のような平行四辺形ができます。

このようにtransform: skewX();を指定するだけで簡単に平行四辺形を作ることができます。

transform: skewX() を使用するうえでの注意点

transform: skewX()をそのまま使用すると要素全体が傾いてしまいます。
例えば……

<p class="button"><a href="#">おくとぱす</a></p>

のようにボタンにはテキストを配置することも多いかと思いますが、そのままpやaタグにtransform: skewX();指定すると中のテキストも傾いてしまいます。

transform: skewX()をそのまま指定すると中のテキストもななめになってしまう

ななめにする装飾は、aタグなどの疑似要素に指定するようにしましょう。
また、aタグの疑似要素で設定することで斜めになった部分もクリックできるようになります。

平行四辺形のボタンの実装例

それでは実際に平行四辺形のボタンを実装してみましょう。

HTML 例）
<p class="button"><a href="#">タコを愛でる</a></p>

CSS 例）    
/* aタグに余白やテキストサイズの指定をする */
.button a {
    position: relative;
    display: inline-block;
    padding: 8px 12px;
    color: #fff;
    font-size: 18px;
    line-height: 1.3em;
    text-decoration: none;
}

/* 疑似要素に平行四辺形の装飾を指定する */
.button a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 3px;
    background-color: red;
    transform: skewX(-15deg);
}

こちらの指定で以下のようなボタンが出来上がります。

そのまま指定すると中のテキストもななめになってしまう