html - css3 中的功能区从一侧到另一侧

Question

我正在努力实现此页面上的结果 http://www.andreapinchi.it/css3-ribbon/

当然是并排，但我似乎无法获得“3D”效果。

请看

http://jsfiddle.net/vuvzcot6/

[html]

<div class="box">
<div class="ribbon both_ribbon">
    <h2>Ribbon side to side</h2>
</div>
</div>

[CSS]

div.both_ribbon{
    background: lime;
    text-align: center;
    color: #000;
    padding: 10px 9px 10px 10px;
    width: 100%;
    margin-left: -10px;
}

div.both_ribbon::before{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    left: -11px;
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(0, 80, 116);
}

div.both_ribbon::after{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    content: "";
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(0, 80, 116);
}

.box { 
    width: 850px;
    height: 800px;
    background: #82caff;
}

有人请指导我。

Answer 1

看起来您缺少 ribbon CSS 类，这是其他类工作所必需的:

.ribbon{
    color: #fff;
    margin: 30px 0 50px;
    position: relative;
    text-transform: uppercase;
    background: rgb(0, 164, 239);
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: 0px 1px 3px rgba(0,0,0,.2);
    padding: 10px 15px;
    clear: both;
}