どうも！LSSです！！
【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。
四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。
亀の甲羅のような模様
実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。
コード
<style>
.turtle{
padding:0.6em;
background:
repeating-conic-gradient(from 40deg at 50% 75%,#bbbb99 0deg 10deg,transparent 10deg 135deg) 0px 0px/40px 80px
,repeating-conic-gradient(from 40deg at 50% 75%,#bbbb99 0deg 10deg,transparent 10deg 135deg) 20px 40px/40px 80px
,#ccccaa
;
}
</style>
<div class="turtle">
repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。<br /><br />実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。<br /><br /><br /><br />
</div>
赤文字部分は好きな文章に変更できます。
※<br/>は改行タグです。ある程度高さがないと見れない模様なもので^^;
模様の構造について
今回の模様の基準になっているのは、
↑こういう形のconic-gradientです。
これを、縦横それぞれ半分づつずらすと、
↑こうなります。
それぞれの地の色を透過した状態で重ねると、
↑こういう模様になり、これを縦にも横にも並べてみると、
こう…少々いびつながら、六角形が並んだような模様になるんですね。
また、コード中、
repeating-conic-gradient(from 40deg at 50% 75%,#bbbb99 0deg 10deg,transparent 10deg 135deg) 0px 0px/40px 80px
,repeating-conic-gradient(from 40deg at 50% 75%,#bbbb99 0deg 10deg,transparent 10deg 135deg) 20px 40px/40px 80px
,#ccccaa
↑色をつけた三か所が、地の色と筋の色となります。
これも色々変えてみるのも面白いかも知れません^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
