css條紋背景

 

1、 水平條紋

1. 兩種顏色：

html

<div class="stripe"></div>

css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: linear-gradient(#fb3 50%,#58a 50%);
  background-size: 100% 30px;
}

效果圖

2. 不等寬的條紋背景

css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: linear-gradient(#fb3 40%,#58a 0);
  background-size: 100% 30px;
}

效果圖

3. 三列條紋背景
css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,deeppink 0);
  background-size: 100% 30px;
}

效果圖

2、垂直條紋

css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: linear-gradient(to right,#fb3 33.3%,#58a 0,#58a 66.6%,deeppink 0);/*或者90deg*/
  background-size: 30px 100%;
}

效果圖

3、斜向條紋

1. 45度角的斜向條紋

css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: linear-gradient(45deg,#fb3 25%,#58a 0,
                                    #58a 50%,#fb3 0,
                                    #fb3 75%,#58a 0);
  background-size: 30px 30px;
}

效果圖

2. 其餘角度的斜向條紋

css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: repeating-linear-gradient(120deg,#fb3 0,#fb3 15px,#58a 0,#58a 30px);
}

效果圖

說明：黃色條紋從0到15px線性漸變，藍色條紋從15px到30px線性漸變。

4、結合半透明實現同色繫條紋

css

.stripe{
  width: 250px;
  height: 150px;
  margin: 50px;
  background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
                    transparent 0,transparent 30px);
  background: #58a;
}

 參考網址https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html

https://www.w3cplus.com/content/css3-background-size