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: "";
}

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