Question

我正在尝试使用Codepen在Dribbble上创建这个图像。
我已经制作了自行车，但我无法获得光线。
我使用overflow:hidden多次尝试过它并没有用。
你知道怎么做吗？

我要做的是：

enter image description here

Answer 1

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

调整数字，但这是一般的想法： ~~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，它应该会非常干净。

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

另外：你可以发布完成的自行车的链接吗？我很想知道你如何处理所有这些曲线。

Answer 2

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;
    }

如何制作梯形形状的渐变div？

2 个答案: