css＆html テキストの前に三角記号を複数並べる方法

画像のように、テキストの前に三角記号を３つ並べたいのですが、
三角記号の位置を左から少しずつずらして配置する方法しか分かりません。
もっとシンプルに作成できる方法はありますか？(><)

【css】
.midashi2{/*見出し*/
position:relative;
background:white;
border-bottom: solid 2px black;/*下線*/
margin-left:10px;
padding:0.2em 0 0.2em 3.5em;/*文字との余白*/
width:520px;
}

.sankaku:before{/*三角記号_1つめ*/
content: "";
position: absolute;/*絶対配置*/
top: 0.5em;/*上からの距離*/
left: 0.5em;/*左からの距離*/
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}

.sankaku2:before{/*三角記号_2つめ*/
content: "";
position: absolute;/*絶対配置*/
top: 0.5em;/*上からの距離*/
left: 1.5em;/*左からの距離*/
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}

.sankaku3:before{/*三角記号_3つめ*/
content: "";
position: absolute;/*絶対配置*/
top: 0.5em;/*上からの距離*/
left: 2.5em;/*左からの距離*/
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}
【html】
<div class="midashi2"><span class="sankaku"><span class="sankaku2"><span class="sankaku3">サンプル</span></span></span></div>

No.1 ベストアンサー 回答者： fujillin 回答日時： 2018/02/23 16:54

こんにちは

ご提示のように三角形を枠線で描画するのであれば、そのための要素（spanなど）が必要になるので、記述を若干要領よくする程度しか思いつきません。（添付図のmidashi4）

文字の三角形（記号）を利用してもよいのであれば、枠線のための要素を設けなくてもよくなるので、多少は簡略化が可能と思います。（添付図のmidashi3）

添付図は試みに、上記の2種類と併せてご提示のサンプル（midashi2）を表示してみたものです。
図はChromeでの表示例ですが、fxでもほぼ同様の表示になります。一方で、IEはご提示のものも含めて、全体的にイマイチな表示になってしまうようです。
（図では文字サイズ、フォントがデフォルトのままなので、ご提示の図とも若干雰囲気は変わっていますが…）

midasi3、midasi4でテストしたCSSとhtmlは以下の通りです。
【 html 】
<p>midashi3</p>
<div class="midashi3"><span>サンプル</span></div>

<p>midashi4</p>
<div class="midashi4">
<span></span><span>サンプル</span>
</div>


【 CSS 】
/*** CSS for midashi3 ***/
.midashi3 {
width: 500px;
margin-left:10px;
border-bottom: solid 2px black;
padding:0.2em 0 0.2em 3.5em;
}
.midashi3>span::before{
content: "\025b6\025b6\025b6";
margin-left: -3em;
}


/*** CSS for midashi4 ***/
.midashi4 {
width: 500px;
margin-left:10px;
border-bottom: solid 2px black;
padding:0.2em 0 0.2em 3.5em;
position: relative;
}

.midashi4>span:first-child::before,
.midashi4>span:first-child::after,
.midashi4>span:nth-child(2)::before {
content: "";
position: absolute;
top: 0.5em; left: 0.5em;
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}
.midashi4>span:first-child::after { left: 1.5em; }
.midashi4>span:first-child::before { left: 2.5em; }

この回答へのお礼

遅くなりすみません。
ご丁寧な回答をありがとうございます。
記号で表示させる方法もアリですね。色々と試してみます。
大変参考になりました！ありがとうございました。

お礼日時：2018/02/27 10:10