【CSSサンプル】亀の甲羅のような模様

　どうも！LSSです！！

【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。

四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。

亀の甲羅のような模様

repeating-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

↑色をつけた三か所が、地の色と筋の色となります。

これも色々変えてみるのも面白いかも知れません^^

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

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