:before と :after の疑似要素を使ってCSSでリボン風見出しを作る方法

Web

ざっくりした解説

今回は h1 要素を装飾する。左右に配置する砂時計型のブロック要素は、h1 の :before と :after で作る。

リボン風見出しCSSの解説図

手順はざっくり以下の通り。

  1. h1 の line-height に基準となるリボンの高さを指定 (今回は3em)
  2. h1 の左右の margin に、指定した高さの半分の値をセット (今回は3÷2=1.5em)
  3. h1:before / h1:after を、それぞれ h1 の左右 -1.5em の位置に配置
  4. h1 の背景色と、h1:before / h1:after の上下ボーダーの色に、同じ色を指定する

結果的に、同じ色がぜんぶ繋がって見えてリボン型になる。
h1:before / h1:after の左右ボーダーの色は、背景色と合わせてもいいが、透明(transparent)にしておけばbody等の地の色がそのまま出せる。

サンプル

https://hi3103.net/study/1904-ribon/

ソース

HTML

<h1>あいうえお</h1>

CSS

※前提:デフォルトのCSS設定はイニシャライズされてプレーンな(余白等がついていない)状態。

h1{
    position: relative;
    background-color: #000;
    color: #FFF;
    line-height: 3em;
    text-align: center;
    margin-left: 1.5em;
    margin-right: 1.5em;
}
h1:after,
h1:before{
    display: block;
    content: '';
    position: absolute;
    top:0;
    border-top: 1.5em solid #000;
    border-bottom: 1.5em solid #000;
    border-right: 1.5em solid transparent;
    border-left: 1.5em solid transparent;
}
h1:after{ left: -1.5em; }
h1:before{ right: -1.5em; }

参考URL

Comments

  • スパム対策のため、コメント本文にURLが含まれている場合は「承認待ち」となり、すぐに投稿が反映されません。ご了承ください。
  • 公序良俗に反する内容、個人が特定できる情報、スパム投稿と思われるコメント等については、予告なく編集・削除する場合があります。