看看这个例子——http://jsfiddle.net/5esgD/2/
我需要使用 :after 和 :before 伪元素来定位绝对位置,但背景有错误:(
如何修复不与红色背景重叠的蓝色背景?
<div class="button_box">
<div class="blue_button"></div>
</div>
<br />
<div style="width: 200px; background: green;">i am 200px</div>
和CSS
.button_box {
width: 200px;
height: 29px;
position: relative;
}
.blue_button:after {
background: none repeat scroll 0 0 red;
border-radius: 0 12px 12px 0;
content: "";
display: block;
height: 29px;
position: absolute;
right: 0;
top: 0;
width: 12px;
}
.blue_button:before {
background: none repeat scroll 0 0 red;
border-radius: 12px 0 0 12px;
content: "";
display: block;
height: 29px;
left: 0;
position: absolute;
top: 0;
width: 12px;
}
.blue_button {
background: none repeat scroll 0 0 blue;
cursor: pointer;
height: 29px;
position: absolute;
width: 100%;
}