【CSS】borderで平行四辺形や台形など斜めな背景デザインを作る
最近のWEBデザインでは平行四辺形や台形による斜めな背景デザインを用いたサイトが
広く見受けられるようになりました。
基本的には四角形で構成されているWEBの要素を、
斜めにしたり回転する方法はいくつかあります。
今回は要素の前後にCSSのborderを使った三角形を重ねることで
「平行四辺形や台形の背景デザイン」を作る方法をご紹介します。
目次
実装した結果
実際のコードと解説
HTMLおよびCSSそれぞれのコードは以下のとおりです。
HTML
平行四辺形と台形の4種類を用意しました。
共通クラスはslantedとしており、それぞれに追加でtype1-4を付与して
それぞれのデザインの違いを作っています。
なお、サンプルでは単純な装飾としてtext-align: centerを付与していますが、
結果を見やすくするためですのでご自身のサイトで流用いただく際には削除して大丈夫です。
<div class="slanted type1">
<p style="text-align: center;">TYPE1</p>
</div>
<div class="slanted type2">
<p style="text-align: center;">TYPE2</p>
</div>
<div class="slanted type3">
<p style="text-align: center;">TYPE3</p>
</div>
<div class="slanted type4">
<p style="text-align: center;">TYPE4</p>
</div>CSS
Sassの環境がない方も利用できるようにCSSでご紹介します。
/* 共通スタイル
-----------------------------------------*/
.slanted {
padding: 220px 0;// 単純に高さを出すために適当に設定
position: relative;
background: #eee;
margin: 0 auto 120px;// 単純に要素同士を離すために適当に設定
}
.slanted:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
.slanted:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
/* 右下斜め方向
-----------------------------------------*/
.type1:before {
border-width: 0 100vw 100px 0;
border-color: transparent #fff transparent transparent;
}
.type1:after {
border-width: 100px 0 0 100vw;
border-color: transparent transparent transparent #fff;
}
/* 左下斜め方向
-----------------------------------------*/
.type2:before {
border-width: 0 0 100px 100vw;
border-color: transparent transparent transparent #fff;
}
.type2:after {
border-width: 100px 100vw 0 0;
border-color: transparent #fff transparent transparent;
}
/* 右が上辺の台形
-----------------------------------------*/
.type3:before {
border-width: 0 100vw 100px 0;
border-color: transparent #fff transparent transparent;
}
.type3:after {
border-width: 100px 100vw 0 0;
border-color: transparent #fff transparent transparent;
}
/* 左が上辺の台形
-----------------------------------------*/
.type4:before {
border-width: 0 0 100px 100vw;
border-color: transparent transparent transparent #fff;
}
.type4:after {
border-width: 100px 0 0 100vw;
border-color: transparent transparent transparent #fff;
}beforeとafterで疑似要素を重ねる
デザインのポイントとなる背景の形状を再現するためには、
対象要素に三角形を重ねる必要があります。
単純な装飾だけの意味合いとなるためHTML側は汚さないように
beforeとafterで疑似要素として三角形をCSSで追加しました。
HTMLの要素は四角形で生成されているため、
対象となる要素自体はposition: relativeとし、
疑似要素をposition: absoluteにしています。
このposition: absoluteによる絶対位置の指定は、
一番近いposition: static以外の親要素を起点としますので、
対象要素をposition: relativeとすることで擬似要素を重ねられました。
borderで三角形を作る
CSSのみで三角形を作るにはborderを使う方法が一般的です。
border-width
線の大きさを決めるプロパティがborder-widthです。
このショートハンドは上 右 下 左で指定をすることができます。
詳しい設定値と形状の関係性はサンプルを参考に実装していただければ幸いですが、
左または右の値を100vwとしてブラウザの幅いっぱいにしていることがポイントです。
border-color
三角形の色を指定しているのがborder-colorです。
このショートハンドも上 右 下 左で指定をすることができます。
指定する値でtransparentは透過を意味します。
具体的には100vwと指定した方向に三角形の色を指定し（サンプルでは#fff）、
それ以外をtransparentとすれば再現されます。
最後に
平行四辺形や台形の斜めな背景デザインで構成されたサイトは、
先進的な印象を与えることができます。
CSSで疑似要素と三角形を作るテクニックを重ねた今回の方法であれば、
サイズや色にあわせて柔軟に応用もできるかと思います。
参考になれば幸いです。
