我正在使用线性渐变来生成具有梯形边框的div的两个部分。我无法在两种颜色之间获得清晰的边界,我得到了一个非常狭窄的渐变区域 - 我已经能够减少它,但我无法完全减少它。
这是我使用的代码:
.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>
您对渐变的声明在 #ffffff
和 #197f88
之间产生 1% 的步长。将其从
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>
在"分隔符样式集合"中,您可以看到许多不同且清晰的分隔符样式。愿这对你的方法有帮助。
我创建了一个使用位置相对/绝对和伪元素之前的解决方案。这是:
//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