Question

我正在使用以下测试代码来尝试创建菱形类型的形状。跨度是标准椭圆形，两侧将使其显示为菱形

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

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

有什么想法吗？

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

Answer 1

    #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/

Answer 2

试试这个：

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

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

Answer 3

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;以实际使用span，请参阅此示例http://jsfiddle.net/3nvhb/

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

3 个答案: