Question

如何在横幅顶部添加2个CSS色带？我在这里设置了一个JSFiddle演示： http://jsfiddle.net/jmxaZ/63/

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

Answer 1

将伪元素更改为：

CSS

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

这会产生梯形而不是三角形;但它隐藏在横幅下面，只显示了2个三角形

demo

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

1 个答案: