Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】でっかい下向き矢印、もうひとつのバリエーション

 どうも!LSSです!!

 

little-strange.hatenablog.com

のバリエーション、もうひとつ考えていたものを公開します。

 

 

だんだん太くなる線

ちょっとアレンジ

 

 

コード

<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は俄然楽しくなりますね^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^