css - 如何制作梯形的渐变div？

Question

• 我正在尝试使用 Codepen 制作我在 Dribbble 上找到的这张图片。
• 我已经制造了自行车，但我找不到灯。
• 我已经使用 overflow:hidden 尝试了几次，但它没有用。
• 您知道如何做到这一点吗？

我想做的是:

web here

Answer 1

使用三 Angular 形而不是梯形。你可以用光覆盖所述三 Angular 形的尖端。

调整数字，但这是总体思路: http://jsfiddle.net/cZQmH/ http://jsfiddle.net/cZQmH/1/ (添加了浏览器兼容性)

<div class="light">
    <div class="top triangle"></div>
    <div class="bottom triangle"></div>
</div>

每个“三 Angular 形”实际上只是覆盖了一个 Angular

.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，它应该会很干净。

归根结底不是使用边框本身，而是使用渐变负片图像。您可以尝试使用 border-image它与 Gradients 一样受到支持但我首先想出了这个解决方案。 It does look like it's possible however

另外:您能否发布指向已完成自行车的链接？我很想知道您如何处理所有这些曲线。