どうも!LSSです!!
のバリエーション、もうひとつ考えていたものを公開します。
だんだん太くなる線
コード
<div style="box-sizing: border-box; height: 200px; background: linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gradient(#ff0000ff 0% 3%,#ff000000 4% 8%,#ff0000ff 9% 17%,#ff000000 18% 26%,#ff0000ff 27% 39%,#ff000000 40% 52%,#ff0000ff 53%) 50% 0/50% 101px no-repeat; font-weight: bold; color: white; text-align: center; padding-top: 110px;">ちょっとアレンジ</div>
文字関連の指定
font-weight: bold; color: white; text-align: center; padding-top: 110px;
中に入れる文字についての指定を追加しました。
font-weight: bold;
文字を太字にしています。
color: white;
文字色を白に指定。
text-align: center;
文字を「中央寄せ」にしています。
padding-top: 110px;
枠内で「上からの位置」を「上の余白」を指定する事でとっています。
矢印の「傘」と「根」の高さがそれぞれ100pxなので、それに少し(10px)足して、傘の中に文字が収まるように110pxとしました。
かなり近いものを先にアレンジしていただいてたり^^
前回のコードを元に、今回のものとかなり近いものを先に作られていたりしますw
イメージを形にできると、CSSのgradientは俄然楽しくなりますね^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^