右梯形輪廓形狀（具有透明度）

Question

我試圖模擬類似於this image的成角度的路徑線。

我這樣做的方式是使用兩個梯形形狀，並與另一個重疊，這將與this jsFiddle中所見的背景相同。

但我意識到我想要的形狀的其餘是透明，而不是能夠與其他對象重疊。

核心是CSS的只是一點點，一outlineMaker DIV一個內rightTrapezoid格。

.rightTrapezoid { 
    border-bottom: 100px solid red; 
    border-left: 0 solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; 
} 
.outlineMaker { 
    border-bottom: 80px solid white; 
    border-left: 0 solid transparent; 
    border-right: 40px solid transparent; 
    height: 20px; 
    width: 80px; 
} 

有沒有簡潔的方法來做到這一點？

Answer 1

完整示例以下nice使用@Feng霍尖。

HTML標記

<div class="trapezoidLine1"> 
    <div class="trapezoidLine2"/> 
</div> 
<div class="trapezoidLine3"> 
    <div class="trapezoidLine4"/> 
</div> 

CSS

.trapezoidLine1 { 
    position: absolute; 
    width: 200px; 
    height: 2px; 
    background: blue; 
} 
.trapezoidLine3 { 
    position: relative; 
    margin-top:45px; 
    width: 207px; 
    height: 2px; 
    background:blue; 
    } 
.trapezoidLine2 { 
    position: absolute; 
    width: 47px; 
    height: 2px; 
    background: blue; 
    left: 200px; 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: rotateZ(80deg); 
} 

.trapezoidLine4 { 
    position: absolute; 
    width: 45px; 
    height: 2px; 
    background: blue; 

    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: rotateZ(270deg); 
} 

嘗試小提琴

http://jsfiddle.net/TNW63/

Answer 2

而不是試圖強制這種方式以某種方式扭曲工作。我給它的思想幾分鐘，實現DUHHHHHHH，我可以做this：

<div class="trapezoidLine1"> 
    <div class="trapezoidLine2"/> 
</div> 

.trapezoidLine1 { 
    position: absolute; 
    width: 200px; 
    height: 10px; 
    background: blue; 
} 

.trapezoidLine2 { 
    position: absolute; 
    width: 200px; 
    height: 10px; 
    background: blue; 
    left: 200px; 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: rotateZ(45deg); 
} 

HERP一個DERP ...