如何創建CSS之字形旗幟

Question

我正在尋找一種方式來CSS背景橫幅看起來像

________ 
\ hi | 
/_______| 

或本

_________ 
\ hi /
/_______\ 

所以基本上封閉的內容可以有背景顏色，並且會在側面具有凹面。 我需要一個簡單的想法如何用css實現這一點

它應該看起來類似於這個。減去摺疊。 http://rfclipart.com/free/straight-banner-ribbon-607-vector-clipart.html

Answer 1

您可以假冒使用非常大的邊界這樣的效果：

border-left: 20px solid white; 
border-right: 20px solid white; 
border-top: 20px solid #333; 
border-bottom: 20px solid #333; 

訣竅當然，當你使用很寬邊框，瀏覽器做的角落的東西你的元素。默認情況下，它們被切割成形狀使您可以形狀你描述：

見上面的例子中的樣子這裏：http://jsfiddle.net/6Z94e/1/

您可以使用transparent作爲左側和右側邊框的顏色，而不是如果您的頁面沒有白色背景，或者#333用於右邊框顏色（如果您在第一個示例中查找形狀）（jsfiddle看起來像您的第二個示例） 。

爲了工作的效果，您的div必須是0像素高。這可以通過將div的內容拉出文檔流來完成，就像我在示例中所做的那樣。