【CSS】transform:skewYで視線を下方向へ誘導する三角形をデザインする
やりたいこと
LP（ランディングページ）などでよく見る、下方向に視線を誘導する三角形をCSSでつくる 方法を紹介します。
HTML
HTMLはこれだけです。
<section></section>
<section></section>CSS
section {
position: relative; /* 親要素にrelativeを指定 */
width: 100%;
height: 300px;
overflow: hidden;
}
section:nth-of-type(1) { /* 1つ目のsectionのbackgroundの色 */
background: rgb(217, 255, 161);
}
/* before,afterの共通項目 */
section:nth-of-type(1)::before,
section:nth-of-type(1)::after {
position: absolute; /* 子要素にabsoluteを指定 */
content: "";
background: #fff; /* 二つ目のセクションのbackgroundと同じ色に */
width: 50%; /* 疑似要素は親要素の半分のwidth */
height: 200px;
bottom: -100px;
}
section:nth-of-type(1)::before{
left: 0;
transform: skewY(12deg); /* 角度はお好みで調整 */
}
section:nth-of-type(1)::after {
right: 0;
transform: skewY(-12deg); /* 角度はお好みで調整 */
}skewY を使うことにより、レスポンシブに対応させることができます。
skewYを微調整
ここでは疑似要素が目に見えるようにしています。 skewYの値を変えて、形を調整してみてください。 本来は点線は見えない状態です。
before,afterのskewの値 : px
before
after
まとめ
- 三角部分は疑似要素before,afterを使ってつくる
- transform: skewYで傾きをつける
