どうも！LSSです！！
以前、「conic-gradient」の存在を初めて知り、びっくりした時の記事。
勢いでいくつか試しに作ったコードを書いていましたが、その中の「集中線」をちょっとだけ改善してみました。
集中線
というネタは以前にも公開していましたが、コードを改善してみました。
コード
<style>
.concentration{
padding:15% 15%;
background:
radial-gradient(farthest-side,#ffffff 75%,#ffffff00 100%),
repeating-conic-gradient(#ffffff 0deg 6.9deg,#000000 7deg 8deg);
text-align:center;
}
</style>
<div class="concentration">CSSで集中線。<br />というネタは以前にも公開していましたが、コードを改善してみました。</div>
変更点
widthやheight、padding-topの指定をやめて、
padding:15% 15%;
を入れました。
paddingは２つ値を指定した場合、「上下の内部余白」「左右の内部余白」となります。
heightの指定をやめた事で、要素の高さは「中身（文字部分のサイズ）」＋「paddingで指定した余白」の高さとなります。（borderを指定しない場合）
コードがすっきりし、内容を変えても柔軟に（前よりは）対応するようになりました^^
ただ、widthの指定を無くした事で「PCとスマホで見え方が違う」という事になります。
width:300px;を指定すると、PCでもスマホのような幅で見える事になります。
radial-gradient(farthest-side,#ffffff 75%,#ffffff00 100%),
の「75%」を小さくすると線が長くなり、大きくすると短くなります。（75%でpaddingが15%ならスマホでも支障なく見られる…というあたりの数値を選んでみました。）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
