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

2019-04-02 1:11
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