HTML 底部边框较平的矩形框
HTML rectangle box with flatter border at bottom
我想在 html 中创建一个底部为圆形但不是圆形的盒子。我知道我可以在底部添加边框半径，请参阅 https://jsfiddle.net/cxo8usyL/
#square_1 {
width: 100px;
height: 250px;
background: gold;
border-radius: 0px 0px 50px 50px;
}
但是底部的圆每次都会转一圈。是否有技巧可以使圆圈像下面的蓝色圆圈一样变平？当前实现（请参阅黄色的 jsfiddle），我的目标是蓝色的。
目标：
您可以使用椭圆边框半径来实现“圆扁”的效果。但是由于您不能仅将它用于 top/bottom 个角，因此您需要将它与一侧的另一个矩形组合起来。
示例解决方案：
border-radius: 60px / 10px;
我想在 html 中创建一个底部为圆形但不是圆形的盒子。我知道我可以在底部添加边框半径，请参阅 https://jsfiddle.net/cxo8usyL/
#square_1 {
width: 100px;
height: 250px;
background: gold;
border-radius: 0px 0px 50px 50px;
}
但是底部的圆每次都会转一圈。是否有技巧可以使圆圈像下面的蓝色圆圈一样变平？当前实现（请参阅黄色的 jsfiddle），我的目标是蓝色的。
您可以使用椭圆边框半径来实现“圆扁”的效果。但是由于您不能仅将它用于 top/bottom 个角，因此您需要将它与一侧的另一个矩形组合起来。
示例解决方案：
border-radius: 60px / 10px;