2

我正在努力实现这种效果。我希望每边的两个条延伸到页面的边缘。这是我最近的一次。我显然需要以某种方式翻转“折叠”，并且我需要让每个浅蓝色条延伸到页面边缘。

http://jsfiddle.net/vPJ8g/

<div id="ribbon">
    <span id="content">Call us today! 555-555-5555</span>
</div>

*{margin:0px;padding:0px;}

html {
    width:100%;
        height:100%;
        background:#CCC;
  text-align: center;
    }

#ribbon {
    padding: .5em 2em;
    margin: 0;
    margin-top: 5%;
    position:relative;
    color: #ffffff;
    font: 20px 'Arial', sans-serif;
    text-align: center;
    background: #5f85b4;
    display: inline-block;
    }

#ribbon:before, #ribbon:after {
    content: "";
    width:1em;
    top:-.5em;
    position:absolute;
    display:block;
    border: .9em solid #1eb2df;
    z-index:-2;
    }

#ribbon:before {
    left:-1.5em;
    }

#ribbon:after {
    right:-1.5em;
    }

#content:before, #content:after {
    content:"";
    bottom:2.1em;
    position:absolute;
    display:block;
    border-style:solid;
    border-color: #2c4059 transparent transparent transparent;
    z-index:-1;
    }

#content:before {
      left: 0;
      border-width: .5em 1em 0 0;
    }

#content:after {
      right: 0;
      border-width: .5em 0 0 1em;
    }
4

2 回答 2

2

您可以使用display: table;anddisplay: table-cell;和一些标记更改来实现您想要的结果。

我删除了你的#content，因为它是一个多余的标识符。您可以使用中的祖先选择#ribbon来获得相同的结果，而无需占用唯一的 ID。

HTML：

<div id="ribbon">
    <div>
        <span>Call us today! 555-555-5555</span>
    </div>
</div>

CSS：

#ribbon {
    display: table;
    margin: 0;
    margin-top: 5%;
    position:relative;
    color: #ffffff;
    font: 20px 'Arial', sans-serif;
    text-align: center;
    width: 100%
}

#ribbon:before, #ribbon:after {
    content: "";
    width:25%;
    top:-.5em;
    position:absolute;
    display: table-cell;
    border: .9em solid #1eb2df;
    z-index:-2;
    }

#ribbon:before {
    left:-1.5em;
}

#ribbon:after {
    right:-1.5em;
}

#ribbon > div {
    margin: 0;
    display: table-cell;
    position: relative;
    width: 53%;
}

#ribbon span {
    display: block;
    color: #ffffff;
    font: 20px 'Arial', sans-serif;
    text-align: center;
    background: #5f85b4;
    padding: .5em 2em;
    position: relative;
}

#ribbon span:before, #ribbon span:after {
    content:"";
    bottom:2.1em;
    position:absolute;
    display: block;
    border-style:solid;
    border-color: #2c4059 transparent transparent transparent;
    z-index:-1;
    top: -10px;
}

#ribbon span:before {
    left: 0;
    border-width: .5em 1em 0 0;
}

#ribbon span:after {
    right: 0;
    border-width: .5em 0 0 1em;
}

示例：http: //jsfiddle.net/vPJ8g/4/

于 2013-09-16T17:22:38.173 回答
0

To get the ribbon to stretch across the whole page, make #ribbon:before and #ribbon:after really big and use a combination of positioning and margins to get them where they need to be:

#ribbon:before {
    width: 1000000em;
    left: 0;
    margin-left: -1000000.8em;
}
#ribbon:after {
    width: 1000000em;
    right: 0;
    margin-right: -1000000.8em;
}

http://jsfiddle.net/BYossarian/vPJ8g/7/

And to flip the triangular folds bits just play with the border-color property:

#content:before {
    left: 0;
    border-width: .5em 1em 0 0;
    border-color: transparent #2c4059 transparent transparent;
}
#content:after {
    right: 0;
    border-width: .5em 0 0 1em;
    border-color: transparent transparent transparent #2c4059;
}

http://jsfiddle.net/BYossarian/vPJ8g/8/

于 2013-09-16T17:34:49.203 回答