2

私はこの効果を達成しようとしています。両側の 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

リボンをページ全体に伸ばすには、非常に大きくし、配置#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/

于 2013-09-16T17:34:49.203 に答える