【画像卒業】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で再現してみましょう。

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

関連記事

HTMLCSS プログラミング

【簡単】CSSでフォントサイズ(font-size)を10px以下で表示する方法

2022.02.19
404
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
182
HTMLCSS プログラミング

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

2022.03.13
2501
HTMLCSS

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
248