煮詰まらないCSSネタ
どうも!LSSです!!
は、実は書き始めた時は全く違うネタだったのが、書いてるうちにああなりました。
数日前から考えてるCSSネタがあるものの、どうにも煮詰まらなくて、結局違う形になっちゃったりしてますw
とりあえず、その「煮詰まらない」ネタを暴露しちゃいます。
これ、どんな形に見えます?
…「辺の窪んだ菱形」、ですね。
これ、CSSのbackgroundプロパティにgradientひとつで描いていますが、linear、radial、conicとあるgradient系のどれをどのように使っているでしょうか?
コード(答え)
<div style="width: 100px; height: 100px; background: radial-gradient(farthest-side,transparent 99%,orange 100%) 50px 50px/100% 100%;"> </div>
答えは「radial-gradientで『内側は透過、外側は塗り』の円を描き、それを縦横ともに枠サイズの半分づつズラした」ものでした!
ずらすのをアニメーションしてみるとよく分かります
…という、「辺の窪んだ菱形」の描き方、なんですが、さてこれをどう活用したものか?というところで脱線したのが、昨日の記事ネタでしたw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^