使用背景图像制作菱形形状

我正在使用以下测试代码尝试创建菱形类型形状。跨度为一个标准的长方形，及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

使用背景图像制作菱形形状

回答

相关问题