使用背景圖像製作菱形形狀

我正在使用以下測試代碼嘗試創建菱形類型形狀。跨度爲一個標準的長方形，及2面會使似乎沒有任何渲染之前和選擇後，出現一個菱形使用背景圖像製作菱形形狀

********** 
*  * 
    ******

然而，。我不確定我是否做錯了，或者如果我完全擺脫了他們的位置，我會更好。

任何想法？

<style> 

span { 
width:50px; 
height:20px; 
color:white; 
background-color:red; 
padding:10px; 
} 

span:before { 
background: url('left_side.png') left center no-repeat; 
height:43px; width:22px; 
} 

span:after { 
background: url('right_side.png') right center no-repeat; 
height:43px; width:22px; 
} 

</style> 

<html> 
<body> 

<span> 
Some text goes here 
</span> 

</body> 
</html>

來源

2013-03-21 rix

試試這個：

span:before { 
    content: url('left_side.png'); 
    height:43px; width:22px; 
} 

span:after { 
    content: url('right_side.png'); 
    height:43px; width:22px; 
}

來源

2013-03-21 12:09:42 Morpheus

的content屬性是強制性的，即使空：

span:before { 
    content : ""; 
    display:inline-block; 
    background: url('left_side.png') left center no-repeat; 
    height:43px; width:22px; 
} 

span:after { 
    content : ""; 
    display:inline-block; 
    background: url('right_side.png') right center no-repeat; 
    height:43px; width:22px; 
}

編輯：添加display:inline-block;的尺寸屬性，以實際與跨度的工作，看到這個例子http://jsfiddle.net/3nvhb/

來源

2013-03-21 12:18:34 darma

#demo { border-top: 100px solid red; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      height: 0; width: 100px; }

做沒有圖像，爲什麼人民作出的CSS3

演示：http://jsfiddle.net/sahilpopli/dRyLg/

來源

2013-03-21 12:20:43

使用背景圖像製作菱形形狀

回答

相關問題