html - 没有边框颜色的梯形

Question

我想在 css 中创建两个梯形。我不能使用边框颜色，因为我想给形状背景图像。一切都应该解释图片。在两个 div 中都会放一些文字。

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

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

Answer 1

您可以通过使用 :after 伪元素在纯 CSS 中实现这一点。

基本上，我创建了两个矩形。然后我在右侧矩形上叠加了一个三 Angular 形，该矩形是通过 :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;
}