CSS 倒三 Angular 形图像叠加

Question

<分区>

Answer 1

这是对边界三 Angular 形概念的一种扭曲。

• 基本:http://jsfiddle.net/nhqKb/
• 更详细:http://jsfiddle.net/nhqKb/3/

HTML

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

CSS

#container{
    height: 300px;
    background-color: red;
    position: relative;
}

#one {
    position: absolute;
    width: 100px;
    left: 0;
    bottom: 0;
    border-bottom: 20px solid green;
    border-right: 20px solid transparent;
}

#two {
    position: absolute;
    left: 120px;
    bottom: 0;
    right: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid transparent;
}

另一种方法:我用 CSS 转换(特别是倾斜)做了类似的事情。参见 CSS (3) & HTML Cut edge .