css - CSS 矩形，一侧为椭圆形

Question

这可以用 CSS 实现吗？（颜色不重要，只是底部是椭圆形）

Answer 1

尝试

background-color: #60a0d0;
border-bottom-left-radius:50% 10%;
border-bottom-right-radius:50% 10%;

（带有适当的浏览器前缀）

Answer 2

你可以得到任何带有椭圆或圆的曲线，放在主块后面：http: //jsfiddle.net/e9RLQ/1/

.box {
    position: relative;    
    background: #60a0d0;
}
.box:after {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 100%;
    width: 300%;
    height: 300px;
    margin: -292px 0 0 -100%;
    background: #60a0d0;
    border-radius: 50%;
    content: "";
}

这里的缺点是添加渐变背景的复杂性。