Html CSS3：如何在同一条横幅上添加两个以上的CSS功能区效果？

如何在我的横幅顶部再添加2个CSS色带？我在这里设置了一个JSFIDLE演示：

<div class="container">
    <p>Nav menu here</p>
    <p>Nav menu here</p>
    <p>Nav menu here</p>    
</div>

<div class="banner-wrapper">        
    <div class="banner" style="background-image:url('http://placehold.it/850x300')">
    </div>
</div>

<div class="container">
    <p>Main content here</p>
    <p>Main content here</p>
    <p>Main content here</p>
</div>

导航菜单在这里

导航菜单在这里

导航菜单在此

这里的主要内容

这里的主要内容

这里的主要内容

将伪元素更改为：

CSS

这将生成一个梯形而不是三角形；但它隐藏在横幅下，只显示了2个三角形

---

什么是CSS功能区？Niels，这是我发布的JSFIDLE示例中看到的黑色三角形。以下是更多信息：

.banner:before {
    content: "";
    width: 0;
    position: absolute;
    left: 0px;
    top: -20px;
    bottom: -20px;
    border-top: 20px solid transparent;
    border-right: 25px solid black;
    border-bottom: 20px solid transparent;
    z-index: -1;
}