でメイク丸め下隅私はborder-radiusと丸い下隅にCSSの形状をしようとしますが、どのように理解するために失敗しています：CSS
.rounded-css {
border-radius: 5px;
display: block;
background: #669999;
width: 150px;
height: 200px;
}<div class="rounded-css"></div>予想される出力：
border-radius: 0 0 50% 50%;を使用して彼は全体の底部分を丸める。白擬似要素::afterを追加することで、あなただけに、不要な上部を「切る」ことができた曲線を示しています。
.rounded {
border-radius: 0 0 50% 50%;
display: block;
background: #669999;
width: 100%;
height: 70px;
margin-top: -35px;
}
.rounded::after {
content: "";
display: block;
width: inherit;
height: 35px;
background: white;
}<div class="rounded"></div>Smthこれのように、ちょうどそれがより大きい幅を持っているときは、イメージのようにシャープになります。 – user3467855
答えを更新しました。このような？ – andreas
はい、ありがとうございます、受け入れられたとマークします。できるだけ速くに。 – user3467855
私はあなたがこれを置きたいコンテナにこれを適応させることができると思います私はそれがあなたが探しているものとほとんど同じだと思う。
.rounded-css {
border-radius: 100%;
display: block;
background: black;
border-bottom: 40px #669999 solid;
border-top: 40px transparent solid;
position: relative;
top: -60px;
overflow: hidden;
}<div class="rounded-css"></div>
あなたはCSSが画像に示される結果を与えることをすることを期待する理由を私は理解していない、またなぜあなたは「トップのコーナーを丸め」と言った後、トップがあるイメージを表示唯一の部分は直線です。 – Quentin
上部コーナーまたは下部コーナー？ –
また、無効な色の16進コード – Adjit