如何使用CSS3渐变实现这样的纹理？

Question

如何使用CSS3渐变实现这样的纹理？

Answer 1

第一个背景很容易使用repeating-linear-gradient：

＆＃13;

＆＃13;

body {
  height:100vh;
  width:100vw;
  background:repeating-linear-gradient(
    to bottom, 
    #58D68D 0, 
    #58D68D 30px, 
    #2ECC71 30px, 
    #2ECC71 60px
  );
}

＆＃13;

＆＃13;

＆＃13;

第二个背景要复杂得多，不应该是CSS解决方案。我建议改为使用background-image！

用CSS解决它是不可能的（使用perspective）：

＆＃13;

＆＃13;

body {
  transform: perspective(100em) rotateX(50deg) scale(2);
  overflow:hidden;
}
div {
  height:100vh;
  width:100vw;
  background:repeating-linear-gradient(
    to bottom, 
    rgba(46, 204, 113, 0.5) 0, 
    rgba(46, 204, 113, 0.5) 30px, 
    rgba(88, 214, 141, 0.5) 30px, 
    rgba(88, 214, 141, 0.5) 60px
  ), repeating-linear-gradient(
    to right, 
    rgba(46, 204, 113, 0.5) 0, 
    rgba(46, 204, 113, 0.5) 30px, 
    rgba(88, 214, 141, 0.5) 30px, 
    rgba(88, 214, 141, 0.5) 60px
  );
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;