沒有邊框顏色的梯形

Question

我想在css中創建兩個梯形。我不能使用邊框顏色，因爲我想給背景圖形。一切都應該解釋這張照片。在這兩個div會把我一些文字。

我可以使用html，css，js，svg只是不知道如何。

http://iv.pl/images/82062332573614452824.jpg http://iv.pl/images/32788252576166741527.jpg

Answer 1

您可以通過:after僞元素的使用純CSS實現這一目標。

基本上，我創建了兩個矩形。然後我在右邊的矩形上疊加一個三角形，通過:after僞元素添加。

jsFiddle example - 看起來一樣

HTML

<div id="wrap"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

CSS

div { 
    float: left; 
    position: relative; 
    height: 100px; 
} 

#one { 
    background: green; 
    width: 130px; 
} 

#two { 
    background: red; 
    width: 70px; 
} 

#two:after { 
    content: "\A"; 
    border-top: 100px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-right: 45px solid red; 
    position: absolute; 
    left: -45px; 
} 

#wrap { 
    overflow: hidden; 
}