CSS | |

CSSだけで作れる見出しのデザイン

CSSだけで実装できる見出しタグの装飾を作ってみました。(27個)

全て暗い色の背景向けです。背景を塗りつぶしている箇所があるため、背景画像があると表示が不自然になるものがあります。文字サイズは固定してあるので、適宜変更して使用します。

表示の確認は、PCのChrome・Firefox・Edgeにて行いました。

↓こういうふうに、見出しタグに class を設定して使います。

<h1 class="header_ribbon1">リボン風の見出し</h1>

もくじ

  1. リボン風の見出し
  2. リボン風の見出し (はみ出さない)
  3. 吹き出しの見出し
  4. 吹き出しの見出し (思ってる)
  5. ラベル風の見出し
  6. ネジで留めた見出し
  7. ネジで留めた見出し (左右)
  8. ネジで留めた見出し (非フォント依存)
  9. セロテープで貼った見出し
  10. マスキングテープで貼った見出し
  11. 切り取り線の見出し
  12. 切り取らない線の見出し
  13. 矢印の見出し
  14. 矢印の見出し (上半分)
  15. 階段のぼる見出し
  16. 階段おりる見出し
  17. リボンマークの見出し
  18. みかんマークの見出し
  19. 月マークの見出し
  20. 死んだ目の見出し
  21. 死んでない目の見出し
  22. 充血した目の見出し
  23. 血がにじむ見出し
  24. 殺人現場の見出し
  25. 殺人現場の立札の見出し
  26. KEEP OUTな見出し
  27. 幻聴がする見出し

リボン風の見出し

ときどき見かけます。この例では親要素をはみ出すので、スマホなど画面幅が狭い端末で見ると、ページ幅をはみ出します。

.header_ribbon1 {
	position: relative;
	margin: 52px -10px 27px -20px;
	padding: 10px calc(10px + 16px) 10px calc(20px + 16px); /* 文字を親要素に収めるために、はみ出させた分を足してる */
	line-height: 1.3;
	background-color: #600;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_ribbon1::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -14px;
	width: 0;
	height: 0;
	border-width: 7px 10px ;
	border-color: #400 #400 transparent transparent;
	border-style: solid;
}
.header_ribbon1::after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	bottom: -14px;
	width: 0;
	height: 0;
	border-width: 7px 5px;
	border-color: #400 transparent transparent #400;
	border-style: solid;
}

リボン風の見出し (はみ出さない)

ページ幅をはみ出さないように、リボンを片側で折ってみました。

.header_ribbon2 {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 16px;
	line-height: 1.3;
	background-color: #600;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_ribbon2::before {
	content: '';
	display: block;
	position: absolute;
	left: 13px;
	bottom: -16px;
	width: 0;
	height: 0;
	border-width: 7px 14px ;
	border-color: transparent transparent #300 #300;
	border-style: solid;
}
.header_ribbon2::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 0;
	height: 0;
	border-width: 8px 20px ;
	border-color: #400 #400 transparent transparent;
	border-style: solid;
}

吹き出しの見出し

ブン殴りたいくらいよく見かけます。

.header_balloon1 {
	position: relative;
	margin: 52px 8px 27px;
	padding: 10px 16px;
	line-height: 1.3;
	background-color: #600;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_balloon1::before {
	content: '';
	display: block;
	position: absolute;
	left: 22px;
	bottom: -26px;
	width: 0;
	height: 0;
	border-width: 13px ;
	border-color: #600 transparent transparent transparent;
	border-style: solid;
}

吹き出しの見出し (思ってる)

自信が無いときに使えます。

.header_balloon2 {
	position: relative;
	margin: 52px 8px 33px;
	padding: 10px 16px;
	line-height: 1.3;
	background-color: #600;
	border-radius: 20px; /* テキストが一行の時に端っこが完全に丸くなる程度に設定 */
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_balloon2::before, .header_balloon2::after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 50%;
	background-color: #600;
}
.header_balloon2::before {
	left: 22px;
	bottom: -10px;
	width: 26px;
	height: 16px;
}
.header_balloon2::after {
	left: 36px;
	bottom: -22px;
	width: 12px;
	height: 11px;
}

ラベル風の見出し

カセットテープやCDのラベルのイメージです。

.header_label {
	position: relative;
	margin: 52px 0 27px;
	padding: 12px 8px 6px 38px;
	line-height: 1.3;
	background-color: #600;
	border-radius: 0 0 5px 5px;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_label::before {
	content: '♪';
	display: block;
	position: absolute;
	top: 11px;
	left: 5px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background-color: #000;
	border-radius: 2px;
	font-size: 90%;
	color: #fff;
}
.header_label::after {
	content: '';
	box-sizing: content-box;
	position: absolute;
	top: 5px;
	left: 0;
	display: block;
	width: 100%;
	height: 0;
	border-top: 1px dotted #000;
}

ネジで留めた見出し

『+』が文字なのでフォントに左右されます。好きな文字を入れてトンチンカンなネジを創造することが可能です。

.header_screw1 {
	position: relative;
	margin: 52px 8px 27px;
	padding: 9px 8px 9px 40px;
	line-height: 1.3;
	background-color: #600;
	border-radius: 5px;
	box-shadow: -1px -3px 0 0 #400 inset;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_screw1::before {
	content: '+';
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	text-align: center;
	background-color: #2c2c2c;
	box-shadow: -2px -6px 0 0 #111 inset, -1px 2px 0 0 #666 inset; /* ネジ全体の影とハイライト */
	text-shadow: -1px 0 0 #c66, 0 -1px 0 #c66, 1px 0 0 #bbb, 0 1px 0 #bbb; /* 十字穴の影とハイライト */
	font-size: 115%;
	color: #600;
}

ネジで留めた見出し (左右)

とてもフォントに依存します。

.header_screw2 {
	position: relative;
	margin: 52px 8px 27px;
	padding: 9px 40px;
	line-height: 1.3;
	background-color: #600;
	border-radius: 5px;
	box-shadow: -1px -3px 0 0 #400 inset;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_screw2::before, .header_screw2::after {
	display: block;
	position: absolute;
	top: 7px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	text-align: center;
	background-color: #2c2c2c;
	box-shadow: -2px -6px 0 0 #111 inset, -1px 2px 0 0 #666 inset;
	text-shadow: -1px 0 0 #c66, 0 -1px 0 #c66, 1px 0 0 #bbb, 0 1px 0 #bbb;
	font-size: 115%;
	color: #600;
}
.header_screw2::before {
	content: '+';
	left: 7px;
}
.header_screw2::after {
	content: '×';
	right: 7px;
}

ネジで留めた見出し (非フォント依存)

文字の代わりに border を用いることで、フォントに左右されないネジを手に入れました。代償に、プラスのネジは無理でした。疑似クラスを before after とも使ってしまうので、左右を同時にとめることはできません。

.header_screw3 {
	position: relative;
	margin: 52px 8px 27px;
	padding: 9px 8px 9px 40px;
	line-height: 1.3;
	background-color: #600;
	border-radius: 5px;
	box-shadow: -1px -3px 0 0 #400 inset;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_screw3::before {
	content: '';
	display: block;
	position: absolute;
	top: 7px;
	left: 7px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #2c2c2c;
	box-shadow: -2px -6px 0 0 #111 inset, -1px 2px 0 0 #666 inset;
}
.header_screw3::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	top: 17px;
	left: 11px;
	width: 13px;
	height: 1px;
	box-shadow: -2px -6px 0 0 #111 inset, -1px 2px 0 0 #666 inset;
	border-left: 1px solid #c66;
	border-top: 1px solid #c66;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
}

セロテープで貼った見出し

黄ばみがポイントです。

.header_sellotape {
	position: relative;
	margin: 52px 20px 27px;
	padding: 10px 27px;
	line-height: 1.3;
	background-color: #400;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_sellotape::before, .header_sellotape::after {
	box-sizing: border-box;
	content: '';
	display: block;
	position: absolute;
	top: 7px;
	width: 34px;
	height: 27px;
	background-color: rgba(80, 70, 40, 0.6);
}
.header_sellotape::before {
	left: -16px;
	border-left: 2px dotted #212121; /* 背景色と同じ色を指定する */
	border-right: 2px dotted #400;
}
.header_sellotape::after {
	box-sizing: border-box;
	right: -16px;
	border-right: 2px dotted #212121; /* 背景色と同じ色を指定する */
	border-left: 2px dotted #400;
}

マスキングテープで貼った見出し

セロテープの色と透明度を変えただけです。

.header_maskingtape {
	position: relative;
	margin: 52px 20px 27px;
	padding: 10px 27px;
	line-height: 1.3;
	background-color: #400;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_maskingtape::before, .header_maskingtape::after {
	box-sizing: border-box;
	content: '';
	display: block;
	position: absolute;
	top: 7px;
	width: 34px;
	height: 27px;
	background-color: rgba(255, 255, 255, 0.3);
}
.header_maskingtape::before {
	left: -16px;
	border-left: 2px dotted #212121; /* 背景色と同じ色を指定する */
	border-right: 2px dotted #400;
}
.header_maskingtape::after {
	right: -16px;
	border-right: 2px dotted #212121; /* 背景色と同じ色を指定する */
	border-left: 2px dotted #400;
}

切り取り線の見出し

ハサミは文字なので、フォントに左右されます。

.header_cuthere1 {
	position: relative;
	margin: 52px 0 27px;
	padding: 26px 8px 8px 20px;
	line-height: 1.3;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_cuthere1::before {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	width: 100%;
	height: 0;
	border-top: 1px dashed #eee;
}
.header_cuthere1::after {
	content: '✂';
	display: block;
	position: absolute;
	top: 0;
	left: 11px;
	font-size: 22px;
	text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}

切り取らない線の見出し

意味が分かりませんが、ハサミの代わりに好きな文字列を入れられます。

.header_cuthere2 {
	position: relative;
	margin: 52px 0 27px;
	padding: 30px 8px 8px 20px;
	line-height: 1.3;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_cuthere2::before {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	width: 100%;
	height: 0;
	border-top: 1px dashed #eee;
}
.header_cuthere2::after {
	content: '(^_^)';
	display: block;
	position: absolute;
	top: 0;
	left: 11px;
	padding: 0 2px;
	font-size: 20px;
	background-color: #212121; /* 背景色と同じ色を指定する */
}

矢印の見出し

ぴゅー

.header_arrow1 {
	position: relative;
	margin: 52px 7px 27px;
	padding: 8px 16px;
	line-height: 1.3;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #999;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_arrow1::before {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	right: -14px;
	bottom: -7px;
	width: 0;
	height: 0;
	border-width: 7px 14px;
	border-color: transparent transparent transparent #ccc;
	border-style: solid;
}
.header_arrow1::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 10%;
	border-top: 1px solid #666;
}

矢印の見出し (上半分)

矢印が上半分だけのバージョンです。お気に入り。

.header_arrow2 {
	position: relative;
	margin: 52px 7px 27px;
	padding: 8px 16px;
	line-height: 1.3;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #999;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_arrow2::before {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-width: 6px 9px;
	border-color: transparent transparent #ccc #ccc;
	border-style: solid;
}
.header_arrow2::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 10%;
	border-top: 1px solid #666;
}

階段のぼる見出し

箱を積んで階段を作りました。1pxの調整で階段の線を隠しているところがあるので、ブラウザの拡大率によっては表示が少しおかしくなるかもしれません。

.header_upstairs {
	position: relative;
	margin: 52px 7px 27px;
	padding: 8px 38px 8px 16px;
	line-height: 1.3;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_upstairs::before, .header_upstairs::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	right: 0;
	background-color: #212121; /* 背景色と同じ色を指定する */
}
.header_upstairs::before {
	bottom: -1px;
	width: 32px;
	height: 14px;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
.header_upstairs::after {
	bottom: 13px;
	width: 16px;
	height: 14px;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

階段おりる見出し

おりてみました。

.header_downstairs {
	position: relative;
	margin: 52px 7px 27px;
	padding: 8px 38px 8px 16px;
	line-height: 1.3;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_downstairs::before, .header_downstairs::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	right: 0;
	background-color: #212121; /* 背景色と同じ色を指定する */
}
.header_downstairs::before {
	top: -1px;
	width: 32px;
	height: 14px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.header_downstairs::after {
	top: 13px;
	width: 16px;
	height: 14px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

リボンマークの見出し

CSSでできるリボンマークです。

.header_symbol-ribbon {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 8px 10px 50px;
	line-height: 1.3;
	border-bottom: 1px dotted #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_symbol-ribbon::before {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	left: 8px;
	top: 8px;
	width: 0;
	height: 0;
	border-left: 16px solid #900;
	border-top: 13px solid transparent;
	border-right: 16px solid #900;
	border-bottom: 13px solid transparent;
}
.header_symbol-ribbon::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(8px + 16px - 8px / 2); /* 基本の位置 + リボン幅の半分 - 結び目幅の半分 (中心位置が左上だから) */
	top: calc(8px + 13px - 8px / 2); /* 基本の位置 + リボン高さの半分 - 結び目高さの半分 (同上) */
	width: 8px;
	height: 8px;
	background-color: #900;
	border-radius: 50%;
}

みかんマークの見出し

CSSでできるみかんマークです。

.header_symbol-orange {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 8px 10px 50px;
	line-height: 1.3;
	border-bottom: 1px dotted #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_symbol-orange::before {
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	top: 10px;
	width: 30px;
	height: 25px;
	background-color: #e82;
	border-radius: 50%;
	box-shadow: 0 -3px 2px 1px rgba(128,0,0,0.4) inset;
}
.header_symbol-orange::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(8px + 30px / 2 - 12px / 4); /* 基本の位置 + みかん幅の半分 - 葉っぱ幅の四半分 */
	top: 6px;
	width: 12px;
	height: 12px;
	background-color: #070;
	border-radius: 100% 0 100% 0;
}

月マークの見出し

月を見るたび思い出す見出しです。

.header_symbol-moon {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 8px 10px 50px;
	line-height: 1.3;
	border-bottom: 1px dotted #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_symbol-moon::before {
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	top: 6px;
	width: 31px;
	height: 30px;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 -3px 2px 1px rgba(0,0,0,0.3) inset;
}
.header_symbol-moon::after {
	content: '';
	display: block;
	position: absolute;
	left: 13px;
	top: 8px;
	width: 27px;
	height: 26px;
	background-color: #212121; /* 背景色と同じ色を指定する */
	border-radius: 50%;
}

死んだ目の見出し

死んでます。

.header_symbol-eye1 {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 8px 10px 50px;
	line-height: 1.3;
	border-bottom: 1px dotted #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_symbol-eye1::before {
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	top: 8px;
	width: 26px;
	height: 26px;
	background-color: #ddd;
	border-radius: 100% 0 100% 0;
	transform: rotate(45deg);
}
.header_symbol-eye1::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(8px + 26px / 2 - 16px / 2);
	top: calc(8px + 26px / 2 - 16px / 2);
	width: 16px;
	height: 16px;
	background-color: #000;
	border-radius: 50%;
}

死んでない目の見出し

死んでません。

.header_symbol-eye2 {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 8px 10px 50px;
	line-height: 1.3;
	border-bottom: 1px dotted #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_symbol-eye2::before {
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	top: 8px;
	width: 26px;
	height: 26px;
	background-color: #ddd;
	border-radius: 100% 0 100% 0;
	box-shadow: 3px 3px rgba(0,0,0,0.2) inset;
	transform: rotate(45deg);
}
.header_symbol-eye2::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	left: calc(8px + 26px / 2 - 16px / 2);
	top: calc(8px + 26px / 2 - 16px / 2);
	width: 4px;
	height: 4px;
	background-color: #ddd;
	border: 6px solid #900;
	border-radius: 50%;
}

充血した目の見出し

プールで病気をうつされました。

.header_symbol-eye3 {
	position: relative;
	margin: 52px 0 27px;
	padding: 10px 8px 10px 50px;
	line-height: 1.3;
	border-bottom: 1px dotted #ccc;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_symbol-eye3::before {
	content: '';
	display: block;
	position: absolute;
	left: 8px;
	top: 8px;
	width: 26px;
	height: 26px;
	background-color: #ddd;
	border-radius: 100% 0 100% 0;
	box-shadow: 3px 3px rgba(0,0,0,0.2) inset, 0 0 4px 4px rgba(192,0,0,0.35) inset;
	transform: rotate(45deg);
}
.header_symbol-eye3::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	left: calc(8px + 26px / 2 - 16px / 2);
	top: calc(8px + 26px / 2 - 16px / 2);
	width: 6px;
	height: 6px;
	background-color: #ecc;
	border-width: 5px;
	border-style: solid;
	border-color: #700 #900 #b00 #900;
	border-radius: 50%;
	box-shadow: 0 0 2px 2px rgba(160,0,0,0.4);
}

血がにじむ見出し

みにくくないですか?

.header_blood {
	margin: 52px 0 27px;
	padding: 8px 14px;
	line-height: 1.3;
	font-size: 18px;
	font-weight: bold;
	color: #800;
	text-shadow: 0 2px 3px #600, -1px 4px 3px #600, 0 6px 3px #600, 2px 0 3px #911, -3px 1px 6px #900;
	word-break: break-all;
	word-wrap: break-word;
}

殺人現場の見出し

ボックスが傾いてるせいで、スマホとかだと画面幅をはみ出します。

.header_claimscene {
	position: relative;
	margin: 52px 0 27px;
	padding: 8px 14px;
	line-height: 1.3;
	font-size: 18px;
	font-weight: bold;
	color: #000;
	text-shadow: 1px 0 0 #ccc, 0 1px 0 #ccc, -1px 0 0 #ccc, 0 -1px 0 #ccc;
	transform: rotate(-2deg);
}
.header_claimscene::before, .header_claimscene::after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 50%;
}
.header_claimscene::before {
	left: 30px;
	top: 5px;
	width: 40px;
	height: 33px;
	background-color: rgba(255,0,0,0.3);
	box-shadow: 0 0 10px 5px rgba(255,0,0,0.3);
}
.header_claimscene::after {
	left: 63px;
	top: 24px;
	width: 14px;
	height: 14px;
	background-color: rgba(255,0,0,0.2);
	box-shadow: 0 0 5px 5px rgba(255,0,0,0.2);
}

殺人現場の立札の見出し

立ててみました。

.header_sign {
	position: relative;
	margin: 52px 0 27px;
	padding: 9px 8px 9px 54px;
	line-height: 1.3;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	word-break: break-all;
	word-wrap: break-word;
}
.header_sign::before, .header_sign::after {
	content: '';
	display: block;
	position: absolute;
	left: 10px;
	top: 5px;
	width: 28px;
	height: 32px;
	border-radius: 2px;
}
.header_sign::before {
	background-color: #111;
	transform: matrix(1, 0, 0.15, 0.75, 5.5, 0); /* 水平傾き0.15, 垂直拡大率0.75, 水平移動5.5 */
}
.header_sign::after {
	content: '3';
	line-height: 32px;
	background-color: #2f2f2f;
	box-shadow: -1px 1px #555 inset;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	transform: matrix(1, 0, -0.15, 0.9, 0, 0); /* 水平傾き-0.15, 垂直拡大率0.9 */
}

KEEP OUTな見出し

さっきから人が死んでるような……。

.header_keepout {
	position: relative;
	margin: 52px 0 27px;
	padding: 3px 8px;
	line-height: 1.3;
	background-color: #fe0;
	font-size: 18px;
	font-weight: bold;
	color: #000;
	font-family: 'Impact',sans-serif;
	word-break: break-all;
	word-wrap: break-word;
}
.header_keepout::before, .header_keepout::after {
	content: '';
	box-sizing: content-box;
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 0;
	border-top: 2px solid #000;
}
.header_keepout::before {
	top: 1px;
}
.header_keepout::after {
	bottom: 1px;
}

幻聴がする見出し

物騒ですがCSSなのでSEO的には問題無いはずです。

.header_hallucination {
	position: relative;
	margin: 52px 0 27px;
	padding: 12px 10px;
	line-height: 1.3;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	overflow: hidden;
	word-break: break-all;
	word-wrap: break-word;
}
.header_hallucination::before, .header_hallucination::after {
	display: block;
	position: absolute;
	left: -8px;
	top: -8px;
	width: 105%;
	font-weight: normal;
	color: rgba(255,255,255,0.15); /* 本体のcolorを薄くしたものを指定する */
}
.header_hallucination::before {
	/* 本体の要素が大きくなりすぎると文字が足りなくなるので、多めに設定 */
	content: '死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね';
	line-height: 1;
}
.header_hallucination::after {
	content: 'ゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズゴミクズ';
	line-height: 0.9;
	font-size: 80%;
}

終わりに

(↑これは本物です。)

人間は、あえて使いにくいものを作ろうと思って作るわけではありません。本当です。できあがったものが使いにくいというだけ……………………。