1

我正在使用以下测试代码来尝试创建菱形类型的形状。跨度是一个标准的长方形，两个边会使它看起来像一个菱形

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

但是，之前和之后的选择器似乎没有渲染任何东西。我不确定我是否做错了，或者我是否最好绝对定位它们。

有任何想法吗？

<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>
4

3 回答 3

3 
    #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-21T12:20:43.817 回答
0

尝试这个：

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

span:after {
   content: url('right_side.png'); 
   height:43px; width:22px;
}
于 2013-03-21T12:09:42.480 回答
0

该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-21T12:18:34.370 回答