![見出し画像](https://assets.st-note.com/production/uploads/images/93328448/rectangle_large_type_2_7bc847b20330eff20e942f46c8910025.png?width=1200)
CSSだけで作る角丸ラインマーカー (改行対応)
CSSだけで複数行(改行)対応のラインマーカーを引くことができます。
角丸になっているのがポイントです!
![](https://assets.st-note.com/img/1670942952817-p7AYrd5K0l.png?width=1200)
<p>「これをお持ちなさい。生憎あいにくマツチを切らしましたから。」<br>
お持ちなさいと云ふのは煙草に添へる一番小型のマツチである。<br>
「貰ふのは気の毒だ。ぢや朝日あさひを一つくれ給へ。」<br>
「何、かまひません。お持ちなさい。」<br>
「いや、まあ朝日をくれ給へ。」</p>
HTMLは何の変哲もないただの文章です。
p {
padding:0 10px;
line-height:2;
background: radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #ee2 7px, transparent 7px) ,
radial-gradient(circle at 7px calc(100% - 7px), #ee2 7px, transparent 7px) ,
linear-gradient(to bottom, #fff calc(100% - 14px), transparent calc(100% - 14px)) ,
linear-gradient(to right, transparent 7px, #ee2 7px, #ee2 calc(100% - 7px), transparent calc(100% - 7px));
display:inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
CSSはこうです。
セレクタ(p)は、ご自由にclassとかにしてください。
padding:0 10px;
10pxで左右のラインマーカーの飛び出し量を調整できます。
line-height:2;
改行幅です。お好きな値にしてください。
display:inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
ここは変えないでください。
-webkit-ベンダープレフィックスは2022/12現在必要みたいです。
background
ここが肝心なのですが、調整は特に難しくないです。
線の太さを変える
14の数字をすべてお好きな数値に変えてください。
その後、7の数字を先ほどの線の太さの数値の半分にしてください。
色を変える
#ee2の黄色になっている個所をすべてお好きな色に変えてください。
背景色を変える
背景色が白ではない場合には、#fffの箇所(1か所)を背景色に変えてください。残念ながら色ベタしか対応できません・・。
おしまい