div 上的宽度为 100%，带有伪元素 :after :before 和绝对位置

Question

看看这个例子——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%;
}

Answer 1

http://jsfiddle.net/5esgD/3/

如果我正确理解您想要什么，只需将border-radius 添加到.blue-button

.blue_button {
    background: none repeat scroll 0 0 blue;

    border-radius: 12px 12px 12px 12px;
    cursor: pointer;
    height: 29px;
    position: absolute;
    width: 100%;
}