そんな疑問にお答えします。
背景を斜めに区切ったレイアウトってよく目にします。
背景カラーでも写真でも斜めのデザインってお洒落でカッコいい。
でもいざ作ろうとしたとき、初見ではまず手が止まります。
どうやって作ってるんだろう…？っていうのが正直なところです。
今回は背景を斜めに区切ったレイアウトにする方法を３つ紹介します。
さあ一緒に見ていきましょう。
今回このレイアウトを作っていきます。
共通のHTMLです。
<section class="section1">
<p>セクション1</p>
</section>
<section class="section2">
<p>セクション2</p>
</section>
transform:skewを使った方法
.section1,
.section2{
padding: 70px;
}
.section1 {
background:#00CC99;
}
.section2 {
position: relative;
z-index: 0;
}
.section2::after{
content: '';
position: absolute;
left:0;
top: 0;
transform: skewY(-6deg);
transform-origin: bottom left;
width:100%;
height:100%;
background:#fff;
z-index: -1;
}
どうしてこう書くと斜めに区切れるのかを見ていきましょう。
まず「section2」はこの位置にあります。
ここから疑似要素（::after）を配置します。
ただし角度やwidthが大きくなると擬似要素の高さが足りなくなる場合がありますので注意しましょう。
borderを使った方法
.section1,
.section2{
padding: 70px;
}
.section1 {
background:#00CC99;
position: relative;
}
.section1::before {
content: '';
position: absolute;
left:0;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 120px 100vw 0 0 ;
border-color: transparent #fff transparent transparent;
}
こちらはborderで三角形を作る仕組みを利用して、セクション間に配置しています。
ここでのポイントは border-width と border-color です。
border-width の「120px」が線の高さになります。値の上下で傾斜を調節します。
「100vw」で線が背景の横幅いっぱいになるように設定します。
border-color の値に「transparent（透過）」を合わせることで、線を斜めにできます。ちなみに右上がりと右下がりでは指定する順番が変わります。
/*右上がり*/
.section1::before {
border-width: 120px 100vw 0 0;
border-color: transparent #fff transparent transparent ;
}
/*右下がり*/
border-width: 120px 0 0 100vw ;
border-color: transparent transparent transparent #fff ;
}
clip-pathを使った方法
.section1 {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 30%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 30%, 0% 100%);
}これは背景を斜めにクリッピング（切り抜き）しています。
コードが少ないのがうれしいですね。
指定の仕方がわかりづらいですが、こちらのジェネレーターを使えば一発です。
一番使いやすそうなんですが、IEは対応していません。
今のところ使用できる場面は限られるようです。
ほかにも「transform: rotate」と「overflow: hidden;」を組み合わせて使う方法などがあります。
複数の方法が使えれば選択の幅も広がります。
いろいろ使ってみましょう。
以上です。
投稿者 トシ
コメントを残す