如何製作梯形形狀的漸變div？

Question

• 我想使用Codepen在Dribbble上找到這個圖像。
• 我製造了這輛自行車，但我無法得到燈光。
• 我試了幾次使用overflow:hidden，它不工作。
• 你有一個如何做到這一點的想法？

我試圖做的是：

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