尝试在某个范围内使用:before
在主要内容的边缘添加背景图片。
基本上应该是这样的:
我将三角形视为bg图像,但似乎无法使其正确显示或完全显示。
见JS小提琴:
答案 0 :(得分:2)
如果你想
,你可以在没有图像的情况下这样做#bottomWide span.ribbon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top:0;
left: -40px;
border-top: 20px solid transparent;
border-right: 40px solid #0099ff;
border-bottom: 20px solid transparent;
}
以下是您可以使用css创建的一些其他形状的列表 http://css-tricks.com/examples/ShapesOfCSS/
答案 1 :(得分:0)
我把它送到show up here,我想你可以得到其余的......
我添加了display: block;
并删除了您的背景位置规则。
答案 2 :(得分:0)
这里是
jsfiddle.net/trajce/Y6rMs/27/
#bottomWide span.ribbon{
position:relative;
background-color:#C1C976;
padding:5px 2%;
float:right;
}
#bottomWide span.ribbon:before{
content:'';
height:38px;
width:25px;
background-image:url(http://i.imgur.com/7nrYgTn.png);
background-position:center left; <-
background-repeat:no-repeat;
position:absolute;
top:0;
left:-30px; <- just play with this values a bit
height:40px; <-
width:30px; <-
}