ミギムキ

[CSS] 旗マーク付きの見出しスタイル

旗マーク付きの見出しスタイル

サンプルコード

html

<h1 class="flag">旗マーク付きの見出しスタイル</h1>
スポンサー広告

CSS

.flag { position: relative; padding: 0px 0px 0px 1.5em; color: #3388dd; font-size: 36px; font-weight: bold; } .flag:before { position: absolute; top: -0.1em; left: 0px; width: 0px; height: 0px; border: 0.5em solid transparent; border-left: 1em solid currentColor; content: ""; } .flag:after { position: absolute; top: 0px; left: 0px; width: 0.1em; height: 100%; background-color: currentColor; content: ""; }