如何使用线性渐变制作异形背景？

Question

如何使用线性渐变制作斜边背景？

html:

<div class="signpost">
        <div class="column">
           
        </div>
        <div class="column bg-gray">
           
        </div>
        <div class="column">
        
        </div>
</div>

css:

.signpost {display: table; width: 100%; height: 100vh; }
.signpost .column {display: table-cell; width: 33.33%; height: 100%; text-align: center;}
.bg-gray {background-image: linear-gradient(to left bottom, #ededed 0%, #ededed 100%, white 0%, white 0%);}

Example

感谢您的帮助！

Answer 1

可以用多个渐变制作：

linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size

.box {
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom right, red 49%, transparent 51%) 0 0/30px 100% no-repeat,
              linear-gradient(to top left, red 49%, transparent 51%) 100% 100%/50px 200% no-repeat, 
              #ededed;
}

<div class="box">
</div>

Answer 2

试试这个

.signpost {
  width: 100wh;
  height: 100vh;
  background: linear-gradient(to bottom right, red 40%, transparent 44%) 0 0/50px 100% no-repeat,
              linear-gradient(to top left, red 40%, transparent 44%) 100% 100%/70px 200% no-repeat, 
              #ededed;
}

<div class="signpost">
</div>

Answer 3

使用一个渐变的想法：

.signpost {
  display: table;
  width: 100%;
  height: 100vh;
}

.signpost .column {
  display: table-cell;
  width: 33.33%;
  height: 100%;
}

.bg-gray {
  background: linear-gradient(to bottom right,red 44%, #ededed 44.1%  55%, red 55.1%) center/100vw 1000vw;
}

body {
 margin:0;
}

<div class="signpost">
  <div class="column">

  </div>
  <div class="column bg-gray">

  </div>
  <div class="column">

  </div>
</div>

如何使用线性渐变制作异形背景？

How to make shaped background using linear gradient?

html

css

background

linear-gradients