html 创建一个跨越页面宽度的三 Angular 形

Question

我想在 html 中的两个 div 之间创建一个跨越页面宽度的三 Angular 形(见下图)。

我不确定 arrow_down div 的 css 应该是什么

<div id="top_section" style="width:100%;">
 <div id="arrow_down">
 </div>
</div>
<div id="bottom_section" style="width:100%;">
</div>

Answer 1

使用伪元素:after

#top_section:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-top: solid 60px #ddd;
    border-left: solid 50vw transparent;
    border-right: solid 50vw transparent;
}

http://jsfiddle.net/gb6otzqr/