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

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%);}

例子

谢谢你的帮助！

标签： htmlcssbackgroundlinear-gradients

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