【画像卒業】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で再現してみましょう。
以上で解説を終わります。
目次