html - 椭圆形的CSS Square Div

我正在尝试在CSS中创建一个div，像this一样向内呈椭圆形。

目前，我的形状是向外而不是向内（JS Fiddle Link）。

.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}

关于如何解决这个问题的任何想法？

最佳答案

看看我的example fiddle。

我使用了一个伪元素和一些椭圆形的边界半径，再加上一个嵌入的盒子阴影。

div {
    position:relative;
    width: 200px;height: 100px;
    background: #CC0000;
    background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
div:after {
    position:absolute;content:"";
    width: 100%;height: 95%;
    background: #222;
    box-shadow:inset 10px -10px 5px -10px #000;
    border-radius: 0 0 0 200px / 100px;
}

稍加努力，您可能会更接近您的结果，但这可能是一个很好的起点。

关于html - 椭圆形的CSS Square Div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19915518/