私はborder-radius-left-topとborder-radius-left-rightでdivを歪ませようとしていますが、それは解決策ではないと思います。私がやろうとしているかを理解するために、ここでそれはイメージです：サークル（ピンク-1のように）異なる高さと幅を持っているので
CSSでトップにスキップ
border-radius: 50%/100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
あなたの国境半径は、この形状を有しています。正しい形状のためには正方形のようにすべきです。高さは同じ幅でなければなりません。この（第3 DIV）を行うために、擬似要素を使用します。
*, *:before, *:after{
box-sizing: border-box;
}
div {
position: relative;
height: 200px;
padding-bottom: 70px;
}
.one {
background-color: #fcfdfe;
}
.one:before {
content: '';
position: absolute;
border-radius: 50%;
height: 100%;
width: 100%;
background-color: pink;
}
.two {
margin-top: -70px;
padding-top: 70px;
padding-bottom: 70px;
background-color: #edf3f8;
border-top-left-radius: 200% 240px;
border-top-right-radius: 200% 240px;
}
.three {
position: relative;
background-color: #10538c;
}
.three-border{
position:absolute;
overflow:hidden;
height:70px;
top:-70px;
left:0;
right:0;
}
.three-border:before {
content: '';
position: absolute;
border-radius: 50%;
height: 300vw;
width: 300vw;
margin: 0 -100vw;
background-color: #10538c;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<div class="one">1111</div>
<div class="two">2222</div>
<div class="three">
<div class="three-border"></div>
3333
</div>
これはあなたを助けることがあります。https://stackoverflow.com/questions/17040709/can-i-create-a-div -with-a-curved-bottom –
私は試しましたが、私がやっている解決策ではありません –
なぜそれがあなたのために働かなかったのですか？それはまったく同じだが、反転したようだ。あなたが達成しようとしていることについては何が違うのですか？ –