ミギムキ

[CSS] アイコンを三角マークにしたリスト

公開日:2019/11/21

アイコンを三角マークにしたリストのサンプル

フッターのリンクなど、文字サイズは小さめだけどリンクであることは強調したいといったとき、リストのアイコンに手を加えることがあります
アイコンを三角形のマークにすることで、押せる感を伝えやすくなります
画像やフォントアイコンは使わずにCSSだけでマークを作ることができるので、色やサイズの微調整もすぐ対応できます

サンプルコード

html

<ul class="list_triangle">
    <li>アイコンを三角マークにする</li>
    <li>アイコンを三角マークにする</li>
    <li>アイコンを三角マークにする</li>
</ul>

CSS

.list_triangle {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.list_triangle > li {
    position: relative;
    padding: 0px 0px 0px 1em;
}
.list_triangle > li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    border-left: 0.4em solid #3388dd;
    content: "";
}

補足・解説

三角形のマークは「border」プロパティを使って描画しています
「width」と「height」を0pxにしたbefore疑似要素に、透明な上下左右の枠線を作ってから、改めて色付きの「border-left」を指定します
「border」と「border-left」のサイズを同じにするとやや平らな二等辺三角形になり、「border-left」のサイズを少し大きくすると、正三角形に近い形にすることができます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。