• HTMLCSS

【画像卒業】CSSだけで平行四辺形を作る方法

平行四辺形のデザイン要素は、画像スライスしてサイトに組み込んでる。

画像ではなく、CSSで平行四辺形を再現する方法を知りたい。

本記事ではこのような悩みを解決。

平行四辺形の実装方法について解説します。

実装サンプル

See the Pen
CSSで平行四辺形を作る by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

画像ではなくCSSで平行四辺形が実装されてます。

実装方法は以下の通りです。

HTML

<!-- 平行四辺形 -->
<div class="parallelogram">
　平行四辺形内に入れる要素
</div>

平行四辺形用のHTML要素を準備します。

平行四辺形にするCSS

  .parallelogram {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    width: 260px;/*平行四辺形の横幅*/
    height: 100px;/*平行四辺形の高さ*/
  }
  .parallelogram::before {
    transform: skewX(-30deg);/*平行四辺形の角度*/
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: rgb(92, 168, 253);/*平行四辺形の色を指定*/
  }

CSSで平行四辺形を作るサンプルコードです。

上記コード内のwidth・heightプロパティに任意の平行四辺形の横幅・高さを指定。

before疑似要素内、transformプロパティのskewX値に任意の平行四辺形角度を指定します。

before疑似要素内、backgroundプロパティに任意のカラーコードを指定します。

以上でCSSで作るオリジナル平行四辺形の完成です。

まとめ

CSSだけで簡単に平行四辺形を実装できます。

シンプルな形状であれば、本記事を参考に画像でなくCSSで再現してみましょう。

以上で解説を終わります。