Tex, python, illusrator, VPSの学生ノート

latotex-blog

CSS

【cssのみ】左右で異なる色のストライプ柄の背景色をつくる!

投稿日:







AdobeXDで頼まれたサイトトップページのデザインをしていたら、
左右で異なる色のストライプ柄を背景色にすると、色が互い違いのストライプ柄より目立たず背景色に使えるのではないかと思いつきました。

調べたところ、このような柄をつくっているサイトはなかったので備忘録として残して置きます。

スポンサーリンク

html、CSSコード

CSSは始めて1か月なのでいろいろ間違っている箇所があるかもしれません。
大目に見ていただきたいです<(_ _)>

See the Pen
jOVzjYe
by latotex-blog (@lato-codepen)
on CodePen.

補足すると、6個の色付き列と7個の白い列(増加分2%に固定)を作るために、
色付きの列における増加分(cssだとcalc(86%/6))の値を以下の式で求めています。

     \[ \frac{100 - (2*7)}{6} = 14.\dot{3}\]

少し問題なのは、グラデーションでストライプを作っているため、
この柄を背景色として設定すると少し色の境界がぼやけて見えます・・・・


-CSS
-, ,

Copyright© latotex-blog , 2021 All Rights Reserved Powered by STINGER.