ミギムキ

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

やりたいこと

サンプルコード

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; }

仕組み、解説、補足など

スポンサー広告