Html CSS-线性渐变的清晰边界

我使用线性渐变来生成两段具有梯形边界的div。我无法在两种颜色之间获得清晰的边界，我得到了一个非常狭窄的渐变区域-我已经能够减少它，但我还不能完全减少它

这是我使用的代码：

。买家部{
宽度：100%；
高度：500px；
背景：-莫兹线性梯度（337度，#FFFFFF 50%，#FFFFFF 49%，#197f88 50%，#197f88 100%）；
/*ff3.6+*/
背景：-webkit渐变（线性、左上、右下、颜色停止（0%、#FFFFFF）、颜色停止（49%、#FFFFFF）、颜色停止（50%、#197f88）、颜色停止（100%、#197f88））；
/*safari4+，铬*/
背景：-webkit线性梯度（337度，#FFFFFF 50%，#FFFFFF 49%，#197f88 50%，#197f88 100%）；
/*safari5.1+，铬10+*/
背景：-o型线性梯度（337度，FFFFFF 50%，FFFFFF 49%，197f88 50%，197f88 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（337度，#FFFFFF 50%，#FFFFFF 49%，#197f88 50%，#197f88 100%）；
/*ie10+*/
背景：线性梯度（113度，#FFFFFF 50%，#FFFFFF 49%，#197f88 50%，#197f88 100%）；
/*w3c*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#FFFFFF'，endColorstr='#197f88'，GradientType=1）；
/*ie6-9*/
}

---

我创建了一个解决方案，它使用相对位置/绝对位置和伪元素之前的位置。这是：

//HMTL(PUG)
.buyers-div

CSS(SASS)
.buyers-div
  position:relative
  width: 100%
  height: 500px
  background-color: #197f88
  overflow: hidden
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 500px
    background-color: white
    left: -50%
    transform: skew(-45deg)

检查

---

谢谢，T04435

您的梯度声明将在

#ffffff

和

#197f88

之间产生1%的步长。把这个从

background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);

到

你可以得到清晰的边界（但角度不是很理想）：

。买家部{
宽度：100%；
高度：500px；
背景：-莫兹线性梯度（337度，#FFFFFF 0%，#FFFFFF 50%，#197f88 50%，#197f88 100%）；
/*ff3.6+*/
背景：-webkit渐变（线性、左上、右下、颜色停止（0%、#FFFFFF）、颜色停止（50%、#FFFFFF）、颜色停止（50%、#197f88）、颜色停止（100%、#197f88））；
/*safari4+，铬*/
背景：-webkit线性梯度（337度，#FFFFFF 0%，#FFFFFF 50%，#197f88 50%，#197f88 100%）；
/*safari5.1+，铬10+*/
背景：-o型线性梯度（337度，#FFFFFF 0%，#FFFFFF 50%，#197f88 50%，#197f88 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（337度，#FFFFFF 0%，#FFFFFF 50%，#197f88 50%，#197f88 100%）；
/*ie10+*/
背景：线性梯度（113度，#FFFFFFFF 0%，#FFFFFF 50%，#197f88 50%，#197f88 100%）；
/*w3c*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#FFFFFF'，endColorstr='#197f88'，GradientType=1）；
/*ie6-9*/
}

---

@Roberrrt您看过原件并比较了吗？在我看来，它看起来很脆。你是对的，但在谷歌浏览器中，这个问题仍然存在。例如，此提琴仅在Google Chrome上存在问题：

background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);