【CSS】レスポンシブ対応の三角形背景

ひとまず備忘録

◆html

<div id=”content”>
<p>コンテンツ</p>
</div>
<div id=”triangleBtm”></div>

◆CSS

#content {
width: 100%;
padding: 1em;
background-color: #ffff00;
}
#content p {
==適宜装飾==
}
#triangleBtm {
width: 0;
height: 0;
border-top: 3vw solid #ffff00;　/*contentの背景と同一色*/
border-left: 50vw solid transparent; /*左と右の色は同じにする*/
border-right: 50vw solid transparent;
}

==========　これだと空divが発生するので、以下に変更したらなかなかいい感じ。　==========

◆html

<div id=”content”>
<p>コンテンツ</p>
</div>

◆CSS

#content {
width: 100%;
padding: 1em;
background-color: #ffff00;
}
#content p {
==適宜装飾==
}

矢印部分を「:after」要素に変更。
#content : after {
content: “”;
display: block;
width: 0;
height: 0;
border-top: 3vw solid #ffff00;　/*contentの背景と同一色 「3vw」は矢印部分の高さ*/
border-left: 50vw solid transparent; /*左と右の色は同じにする*/
border-right: 50vw solid transparent;
}

これでスッキリ。