如何使用CSS實現此功能區效果？

我正試圖達到這個效果。我希望每邊的兩個橫條延伸到頁面的邊緣。這是我最近來的。我顯然需要以某種方式翻轉「摺疊」，並且我需要讓每個淺藍色條延伸到頁面的邊緣。如何使用CSS實現此功能區效果？

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

來源

2013-09-16 talena6

您可以使用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/

來源

2013-09-16 17:22:38 Axel

真棒！你知道我如何翻轉那些深藍色的「摺疊」區域嗎？ – talena6

你在找這樣的東西嗎？正是這樣！http://jsfiddle.net/vPJ8g/9/ – Axel

沒錯！非常感謝你！ – talena6

要得到色帶橫跨整個頁面得以舒展，使#ribbon:before和#ribbon:after真大並使用組合o ˚F定位和利潤，讓他們在那裏他們需要的是：

#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-16 17:34:49 BYossarian

如何使用CSS實現此功能區效果？

回答

相關問題