ひとまず備忘録
◆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;
}
これでスッキリ。
コメント