CSSだけで作る角丸ラインマーカー （改行対応）
CSSだけで複数行（改行）対応のラインマーカーを引くことができます。
角丸になっているのがポイントです！
<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か所）を背景色に変えてください。残念ながら色ベタしか対応できません・・。
おしまい