Question

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

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

Answer 1

您可以使用display: table;和display: 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/

Answer 2

要让功能区在整个页面上展开，请使#ribbon:before和#ribbon:after非常大，并使用定位和边距的组合将它们放到需要的位置：

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

要翻转三角形折叠位，只需使用border-color属性：

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

如何使用CSS实现此功能区效果？

2 个答案: