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

【问题标题】：How to make shaped background using linear gradient?如何使用线性渐变制作异形背景？
【发布时间】：2021-02-27 18:43:59
【问题描述】：

如何使用线性渐变制作侧面斜角背景？

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

感谢您的帮助！

【问题讨论】：

标签： html css background linear-gradients

【解决方案1】：

试试这个

.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>

【讨论】：

【解决方案2】：

可以用多个渐变制作：

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>

【讨论】：

【解决方案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>

【讨论】：