border で作った三角形を応用してみる

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; //濃青
}

表示例

色や装飾にこだわれば、様々なバリエーションが作れます。

モバイルでの表示例

凝った装飾を行う時は、レスポンシブでの変化も考慮に入れる必要がありますね。