0

この例を見てください — http://jsfiddle.net/5esgD/2/

:after および :before 疑似要素で絶対位置を div する必要がありますが、背景にはバグがあります :(

赤い背景と重ならないように青い背景を修正する方法は?

<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%;
}
4

1 に答える 1

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%;
}
于 2013-03-21T20:11:26.130 に答える