
CSS3 の border 機能を工夫することで三角形を作ることができます。今回は、この三角形を応用して「注目ポイント」を表現するような表示を作ってみます。
「注目ポイント」を表現する
「注目ポイント」を表現する実際のソースコード例は以下のようなものです。
html
- 今日のポイント
- 雨の日は傘をさすと良い!
CSS
.attention {
margin:20px 0;
}
.attention dt {
position: relative;
float: left;
clear: both;
padding: 10px 20px;
background: #0278ae; //濃青
color: #fff;
font-weight:bold;
}
.attention dd {
display: inline-block;
margin: 0;
padding: 10px 30px;
background: #fbffa3; //黄クリーム
color: #0278ae; //濃青
}
.attention dt::after {
position: absolute;
left: 100%;
top: 50%;
content: ' ';
height: 0;
width: 0;
margin-top: -10px;
border: solid transparent;
border-width: 10px 10px;
border-left-color: #0278ae; //濃青
}
表示例
色や装飾にこだわれば、様々なバリエーションが作れます。
モバイルでの表示例
凝った装飾を行う時は、レスポンシブでの変化も考慮に入れる必要がありますね。