[CSS] 王冠マーク付きの見出し＆リストスタイル
- ランキングの紹介記事などで、王冠マーク付きの見出しを見かけることがあります
- このような図形もCSSだけで簡単に作ることができます
- before/after疑似要素とボーダーで三つの三角形を組み合わせて王冠のようにしています
- ボーダーの色に「currentColor」を使用することで、見出しの色と王冠の色が連動するようにしています
- ボーターの大きさをem形式で指定し、見出しの大きさに応じて王冠のサイズも変えています
サンプルコード
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;
}
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。