どうも！LSSです！！
なんとなくCSSをいじっていると、謎の背景模様？ができました。
謎の背景模様『山』
repeating-conic-gradientひとつだけで作った背景ですが、それっぽくないところが面白いかな？と。
薄い緑の『山』という字が傾いて並んでいるようでもあり、逆に白い部分も同じように繰り返し並んでいる、という繰り返し背景模様です。
コード
<style>
.yama{
background:
repeating-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddffdd 61deg 120deg) 0 0/50px 50px;
}
</style>
<div class="yama">なんだか、CSSを色々いじっているうちに、謎の背景模様ができましたｗ<br /><br />repeating-conic-gradientひとつだけで作った背景ですが、それっぽくないところが面白いかな？と。<br /><br />薄い緑の『山』という字が傾いて並んでいるようでもあり、逆に白い部分も同じように繰り返し並んでいる、という繰り返し背景模様です。</div>
赤太字部分を好きな文章に書き換えて使用できます。
styleオプションに書く場合
こっちのコードでも
いいかも。
こっちの方が使いやすいかも。
コード
<div style="background: repeating-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddffdd 61deg 120deg) 0 0/50px 50px;">プロパティひとつだけなので、<br />こっちのコードでも<br />いいかも。<br />こっちの方が使いやすいかも。</div>
あとがき
「from 45deg」の数値を変えると、だいぶ違う模様になったりもします。
「#ffffff 0deg 60deg,#ddffdd 61deg 120deg」という記述は「0～60度までは白、61～120度までは薄緑」という指定ですが、当初は「0～30、31～60」で作ってみていたんですね。
それはそれで綺麗にハマるものの、面白味がイマイチかな…と数値を変えてるとたまたまこうなりました。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
