没有边框颜色的梯形

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