-1

角丸画像

やあ、

css3で以下のデザインを作成するのを手伝ってくれる人はいますか。次のプロパティを試しましたが、正確なデザインを取得するにはまだ問題があります

background:#c6d92d;
height: 5em;
width: 20em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 5em 5em 1em 1em;
padding:20px;

ありがとう

4

2 に答える 2

3

それを達成するには、複数の div が必要です。

他の 2 つの div (左に 1 つ、右に 1 つ) を、黒の背景の上に半径を指定して白で配置する必要があります。

これは、私のサイトで達成した効果です: http://dystroy.org/re7210/ (「Toutes les recettes」をクリックしてください)。

あなたはこのようにします：

        _________
       /         \
div C |  div A    |  div B
     /            \

C と B は、黒い背景を持つセルの 100% をカバーする白い div です (これは、border-radius が 0 でない場合にのみ表示されます)。

この場合、メインの div の右側にある div には次の css があります。

#divB {
background-color: white;
border-radius: 0 0 0 10px;
}

これが私の最終的な効果です：

ここに画像の説明を入力

そして、これが私の「divB」です。これにより、黒の上に白があり、白の上に黒がある場所が明らかになります。

ここに画像の説明を入力

（ご覧のとおり、表を使用してこれらすべてを構成する方が簡単であることがわかりましたが、おそらく表なしで行うことができます）

于 2012-05-24T13:49:37.560 に答える
1

The properties you are looking for are: border-top-left-radius and border-top-right-radius
http://www.css3.info/preview/rounded-border/

于 2012-05-24T13:52:10.487 に答える