CSSで平行四辺形を作る方法と使い方。エリアの境目を斜めにする。

CSSのみで平行四辺形を作る方法を紹介します。

この方法を使うことで、以下のことなどがCSSのみで可能になります。

主に使用するCSSプロパティは、transform: skew();です。

CSSで平行四辺形を作る。

まずはtransform: skew();を使って平行四辺形を作ってみます。

ただ図形を作るだけなら非常に簡単にできます。

<style>
div.test1{
    transform: skewX(-45deg);
    width: 100px;
    height: 50px;
    margin:0 auto;
    background-color:#00FBFF;
}
</style>
<div class="test1">
</div>

しかし、この書き方だとdivの中の要素まで変形してしまいます。

文字を入れると以下のようになります。

そこで、平行四辺形の図形となる要素を、cssの疑似要素::before(もしくは::after)で作ることで、transform(変形)を中の要素に影響しないようにします。

イメージ的には以下のようになります。

実際に構築するとこのようになります。

<style>
div.test2{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    width: 100px;
}
div.test2::before{
    transform: skewX(-45deg);
    content: ""; /*ボックスを作る*/
    position: absolute;　/*ポジションで中央に配置*/
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;　/* 親要素の後ろに来るように-1 */
    background-color:#00FBFF;
}
</style>
<div class="test2">
平行四辺形
</div>

平行四辺形のナビゲーションを作る

次に、平行四辺形のナビゲーションを作ってみます。

<ul>の中に<a>を入れ、flexboxで横並びにします。

その<a>に対して先ほど疑似要素の方法で平行四辺形を作ります。

• navi1
• navi2
• navi3
• navi4
• navi5

<style>
ul.test3{
    list-style: none;
    display: flex; /*横並びにする*/
}
ul.test3 li{
    text-align: center;
}
ul.test3 li a{
    position: relative;
    padding: 5px 15px;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    z-index: 1;
}
ul.test3 li a::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background-color:#092db1;
    transform: skewX(-45deg);
}
ul.test3 li:nth-child(odd) a::before{
    background-color:#1049bd; /*互い違いに色を変える*/
}
ul.test3 li a:hover::before{
    background-color:#de5901; /*ホバーでオレンジ色にする*/
}
</style>

<ul class="test3">
<li><a>navi1</a></li>
<li><a>navi2</a></li>
<li><a>navi3</a></li>
<li><a>navi4</a></li>
<li><a>navi5</a></li>
</ul>

平行四辺形を使ってエリアの境目を斜めにする

エリアの境目が斜めになっているデザインを時々見かけます。

これも、先ほどの技法を使うことで実現できます。

今回は、transform: skewY();を使います。XでなくYですね。

縦方向に変形することになります。

<style>
div.test4{
    position: relative;
    padding: 50px 20px;
    z-index: 1;
}
div.test4::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background-color:#f1f1f1;
    transform: skewY(3deg);
}
</style>

<div class="test4">
<p>ここにエリアの区切りが斜め線のデザインを作ります。</p>
</div>

いかがでしょうか。

今回はtransform: skewY(3deg);です。あまり数値が大きいと変形しすぎて扱いづらくなると思います。