CSS ストライプの作成

2020-02-24

背景などで斜めのストライプをよく使用することが増えたので、メモとして。。

Sample-１

/* ストライプ　の作成 - その1 - */
.sample1{
 background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 5px, #fff 0, #fff 6px);
 -webkit-background-size: 8px 8px;
}

/* ストライプ　の作成 - その1 - */

.sample1{

background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 5px, #fff 0, #fff 6px);

-webkit-background-size: 8px 8px;

}

pxサイズなどを変更すると、ストライプの間隔を変えることもできますので、いろいろ試してみて下さい。

また、%での指定方法は、以下のようなカタチがあるようです。

Sample-2

/* ストライプの作成　- その２ - */
.sample2{
 background-image: linear-gradient( -45deg,
 #fff 25%, #ccc 25%,
 #ccc 50%, #fff 50%,
 #fff 75%, #ccc 75%,
 #ccc );
 background-size: 8px 8px;
}

/* ストライプの作成　- その２ - */

.sample2{

background-image: linear-gradient( -45deg,

#fff 25%, #ccc 25%,

#ccc 50%, #fff 50%,

#fff 75%, #ccc 75%,

#ccc );

background-size: 8px 8px;

}