三角形の作り方。実装する度にいろんなサイトを拝見して時間を無駄にしているんですが、
デザインの中で段落の区切りとして横幅いっぱいの三角形を表示する機会があったので、自分の備忘録として記述すると同時に
同じことを実装したい人の助けになればと思います。
html
<div class="gyaku-triangle g-triangle-1">
<div class="left-half"></div>
<div class="right-half"></div>
</div>
sass
.gyaku-triangle {
width: 100%;
display: flex;
position: relative;
&:before {
content: '';
width: 50%;
height: 100px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.left-half {
width: 50%;
height: 120px;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(10deg);
}
.right-half {
width: 50%;
height: 120px;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
}
.g-triangle-1 {
background-color: #FFDF8D;
&:before {
background-color: #F3BD32;
}
.left-half {
background-color: #F3BD32;
}
.right-half {
background-color: #F3BD32;
}
}
完成例
「gyaku-triangle」と「g-triangle-1」の２つにセレクタを分けているのは、各セクションごとに背景と三角形の色（次のセクションの背景）を指定するために分けているので、一部でしか使用しない場合は、一つにまとめることもできると思います。
自分自身transformプロパティを使いこなせているわけではないので、大胆で流動的なデザインを表現できるこのプロパティを深堀りしていきたいと思う今日このごろです。
