1

Web コーナーで円弧を作成する方法を知っています。この円弧の右側のセクションでは、次の)コードを使用できます。

 border-bottom-right-radius: 15px;

この円弧の左側のセクションでは、次の(コードを使用できます。

 border-bottom-left-radius: 15px;

したがって、次の結果になります。 (_____)

しかし、右隅に円弧「(」、左隅に「)」を作成するにはどうすればよいですか。半径に -15px は使用できません。

結果は次のようになります。 )_____(

4

2 に答える 2

1

簡単な解決策は、境界線の半径と反対の背景を持ついくつかの子要素を親に追加することです: HTML

<div id="test">
    <div class="right_border border"></div>
    <div class="left_border border"></div>
</div>

CSS

#test {
    background:#CCC;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden
}
div.border {
    position:absolute;
    top:0;
    bottom:0;
    background:#FFF;
    width:50%;
}
.left_border {
    left:-25%;
    border-radius: 50%
}
.right_border {
    right:-25%;
    border-radius: 50%
}

デモ: http://jsfiddle.net/xq3C7/

于 2013-01-20T18:13:07.303 に答える
0

CSS グラデーションを使用してこれを行うためのファンキーな方法があります。

このようなもの：

div {
background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

このリンクを参照してください。

http://jsfiddle.net/leaverou/EjE7c/light/

そしてチュートリアル：

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

そのためのjQueryプラグインもありますが、かなり重いようです。

背景画像を使用して偽造することもできますが、それはあなたが望むものではないと思います.

于 2013-01-20T14:56:23.750 に答える