ミギムキ

[CSS] 王冠マーク付きの見出し&リストスタイル

王冠マーク付きの見出し

サンプルコード

html

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

CSS

.crown { position: relative; padding: 0px 0px 0px 2.5em; color: #3388dd; } .crown:before, .crown:after { position: absolute; left: 0px; width: 0px; height: 0px; content: ""; } .crown:before { top: -1.25em; border: 1em solid transparent; border-bottom: 1.5em solid currentColor; } .crown:after { top: 0.25em; border: 0.5em solid transparent; border-left: 1em solid currentColor; border-right: 1em solid currentColor; }

王冠マーク付きのリスト

王冠マーク付きのリスト

html

<ul class="list_crown"> <li>第1位 ボボボーボ・ボーボボ</li> <li>第2位 ボボボーボ・ボーボボ</li> <li>第3位 ボボボーボ・ボーボボ</li> </ul>
スポンサー広告

CSS

.list_crown { list-style: none; } .list_crown > li { position: relative; padding: 0px 0px 0px 2.5em; color: #3388dd; font-size: 18px; } .list_crown > li:before, .list_crown > li:after { position: absolute; left: 0px; width: 0px; height: 0px; content: ""; } .list_crown > li:before { top: -1.25em; border: 1em solid transparent; border-bottom: 1.5em solid currentColor; } .list_crown > li:after { top: 0.25em; border: 0.5em solid transparent; border-left: 1em solid currentColor; border-right: 1em solid currentColor; } .list_crown > li:nth-of-type(1) { color: #dbb400; } .list_crown > li:nth-of-type(2) { color: #9fa0a0; } .list_crown > li:nth-of-type(3) { color: #c47022; }