ミギムキ

[CSS] コピペで使える平行四辺形の見出し

公開日:2018/09/07 更新日:2020/03/01

平行四辺形の枠で囲われた見出しを作りたい
枠の大きさは固定値ではなく、文言の長さに合わせて伸長させたい

サンプルコード

.parallelogram {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 0px 1em;
    color: #fff;
    font-weight: bold;
}
.parallelogram::before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    transform: skewX(-20deg);
    background-color: #3388dd;
    content: "";
}

仕組み、解説、補足など

transform: skewX(-20deg);でY軸の傾きをつけることで、枠を平行四辺形の形に変更することができます
単純に要素を傾けると文字まで斜めになってしまうので、要素と同じ縦横サイズを持ったbefore擬似要素を斜めに傾けています

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

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

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