[英]How to make a gradient div in the shape of a trapezoid?
overflow:hidden
并且它无法正常工作。 我想要做的是:
使用三角形代替梯形。 你可以用光覆盖所述三角形的尖端。
调整数字,但这里是一般的想法: http : //jsfiddle.net/cZQmH/ http://jsfiddle.net/cZQmH/1/ (添加浏览器兼容性)
<div class="light">
<div class="top triangle"></div>
<div class="bottom triangle"></div>
</div>
每个“三角形”实际上只是掩盖了角落
.light { /* Just a big box. Where the magic happens*/
padding:50px 0px;
position: absolute;
background: -webkit-linear-gradient(left, rgba(255,255,255,1),rgba(255,255,255,1), rgba(255,255,0,0)); /* should add other compatibility things */
height: 75px;
width:200px;
}
.triangle {
width: 50px;
position: absolute;
left: 0;
}
.top { /*Covers top corner*/
top:0;
border-top: 100px solid #ff0;
border-right: 100px solid transparent;
}
.bottom { /* Covers bottom corner */
bottom:0;
border-bottom: 100px solid #ff0;
border-right: 100px solid transparent;
}
最终的CSS有点冗长,但是如果你使用的是LESS或SASS,它应该非常干净。
它归结为不是使用边框本身,而是使用渐变底片。 您可以尝试使用与Gradients一样受支持的border-image ,但我首先想出了这个解决方案。 但它确实看起来很可能
另外:你能发布完成的自行车的链接吗? 我很想知道你如何处理所有这些曲线。
HTML
<div class="light">
<div id="trapezoid"></div>
<div id="trapezoid-two"></div>
</div>
CSS
.light{
background-color: yellow;
width: 400px;
height: 200px;
}
#trapezoid {
top: 50px;
left: 150px;
position: absolute;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
height: 16px;
border-right-width: 160px;
border-right-style: dashed;
border-right-color: white;
}
#trapezoid:before {
content: '';
position: absolute;
width: 40px;
height: 10px;
-webkit-box-shadow: 3px 0 130px 80px white;
left: 160px;
border-radius: 50px;
background-color: white;
}
#trapezoid-two{
top: 60px;
left: 200px;
position: absolute;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
height: 6px;
border-right-width: 160px;
border-right-style: solid;
border-right-color: white;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.