没有边框颜色的梯形

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