sbnk4030 https://blog.hatena.ne.jp/sbnk4030/ 旧さびぬき覚書 https://sbnk.hatenablog.com/ webのこと web制作中に「背景にwidth100%で水平方向（横）に1本のライン（線）が入ってて、その上に要素がある」ものを作る機会がありまして… 見出しのデザインで「文字の左右にラインが入ってる」ものありますよね これで左右の余白0にすればいけるんじゃね？と思ったのですが、 要素にマージンつけちゃうと当たり前なんですがラインも途切れました。そこで「文字にマーカーみたいに線いれる」デザインで使うlinear-gradientを応用して、グラデーションで中央にだけ線があるように見せれば… html: <div class="container-fluid"> <div class="bg-line my-… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fsbnk.hatenablog.com%2Fentry%2F2022%2F03%2F28%2F101404" title="CSSで背景に水平方向に貫いてるラインを入れたい - 旧さびぬき覚書" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/sbnk4030/20220325/20220325165939.png Hatena Blog https://hatena.blog 2022-03-28 10:14:04 rich https://sbnk.hatenablog.com/entry/2022/03/28/101404 1.0 100%