CSS - 用于线性渐变的清晰边界

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

这是我使用的代码：

.buyers-div { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: -moz-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(49%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%); 
 
    /* w3c */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1); 
 
    /* ie6-9 */ 
 
}

<div class="buyers-div"></div>

来源

2017-05-17 Rimil Dey

你梯度的声明产生的1％#ffffff和之间的一个步骤。从

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

更改为

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

，你会得到清晰的边界（但角度而次优）：

.buyers-div { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: -moz-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(50%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%); 
 
    /* w3c */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1); 
 
    /* ie6-9 */ 
 
}

<div class="buyers-div"></div>

在A Collection of Separator Styles那里你可以看到很多不同的d清晰的分隔符样式。可能对你的方法有帮助。

来源

2017-05-17 12:34:19 RWAM

你是对的，但在Google Chrome浏览器中问题仍然存在。例如，这个小提琴在Google Chrome上只有问题：[link]（https://jsfiddle.net/rk5jgvpt/） – webpaul

我已经创建，它使用相对/绝对和伪元件之前的位置的解决方案。这就是：

//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)

检查SOLUTION

感谢，T04435

来源

2017-05-17 12:13:38 T04435

这并不真的看起来很cri .. .. – Roberrrt

@Roberrrt你看看原始和比较吗？它看起来很脆。 – T04435

CSS - 用于线性渐变的清晰边界

回答

相关问题