使用背景图像制作菱形
使用背景图像制作菱形
提问于 2013-03-21 20:04:31
我使用下面的测试代码来尝试创建一个菱形形状。跨度是一个标准的长方形，两边看起来像菱形。
**********
* *
******但是，之前和之后的选择器似乎不会呈现任何内容。我不确定我是不是做错了，或者我只是更好地绝对地定位它们。
有什么想法吗？
<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>回答 3
Stack Overflow用户
发布于 2013-03-21 20:20:44
#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/
Stack Overflow用户
发布于 2013-03-21 20:09:42
试试这个：
span:before {
content: url('left_side.png');
height:43px; width:22px;
}
span:after {
content: url('right_side.png');
height:43px; width:22px;
}Stack Overflow用户
发布于 2013-03-21 20:18:34
即使保留为空，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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15547027
复制相关文章
相似问题
腾讯云开发者
