[CSS] 範囲を表す矢印記号をCSSで書きたい

公開日:2018/10/06

やりたいこと

範囲を示すときに、左矢印と右矢印をくっつけた両矢印を使うことがあります
ワークフローの下に添えて、各フローにどのくらいの期間がかかるのかを示すのに使えます

サンプルコード

html

<p class="range_arrow"><span>2〜3日</span></p>

CSS

.range_arrow {
    position: relative;
}
.range_arrow::before {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    transform: translateY(50%);
    width: 100%;
    height: 3px;
    background-color: #3388dd;
    content: "";
}
.range_arrow > span::before,
.range_arrow > span::after {
    position: absolute;
    bottom: 0px;
    width: 24px;
    height: 24px;
    content: "";
}
.range_arrow > span::before {
    left: -3px;
    transform: rotate(45deg);
    transform-origin: bottom left;
    border-bottom: 3px solid #3388dd;
    border-left: 3px solid #3388dd;
}
.range_arrow > span::after {
    right: -3px;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    border-bottom: 3px solid #3388dd;
    border-right: 3px solid #3388dd;
}
.range_arrow > span {
    display: block;
    padding: 0px 24px;
    font-size: 16px;
    text-align: center;
}

仕組み、解説、補足など

height、padding-topは、使用する画像や背景の上に文字などを載せるかなど、用途に応じて設定してください
あくまで単なる背景として使用するなら、heightもpadding-topも不要です
背景画像の縦横比をきちんと維持したい場合は、padding-topに「画像の高さ / 画像の幅」の%を設定してください

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

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

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