具有向内椭圆形的 CSS Square Div答案

【问题标题】：CSS Square Div with an Inward Oval Shape具有向内椭圆形的 CSS Square Div
【发布时间】：2014-11-17 12:28:39
【问题描述】：

我正在尝试在 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%);
}

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

【问题讨论】：

标签： html css gradient shapes css-shapes

【解决方案1】：

看看我的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;
}

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

【讨论】：

【解决方案2】：

我为你创建了this fiddle。代码如下：

HTML

<div class="container">
    <div class="shape"></div>
</div>

CSS

.container {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
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%);
}
.shape {
width: 100px;
height: 50px;
border: none;
background: #000000;
border-radius: 0 0 0 90px;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
}

【讨论】：

【解决方案3】：

如果图形中“不存在”的部分实际上不必是透明的，那么您可以制作一个常规矩形，然后构建一个位于矩形顶部并具有与背景颜色相同。

http://jsfiddle.net/ub8fM/1/

.shape {
    float: left;
    width: 100px;
    height: 50px;
    border: none;
    background: #CC0000;
    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%);
    position:relative;
}

.shape:before {
    border-radius: 0 90px 0 0;
    -moz-border-radius: 0 90px 0 0;
    -webkit-border-radius: 0 90px 0 0;
    content:'';
    position:absolute;
    top:0;
    left:0;
    background:white;
    width:100%;
    height:100%;
}

拥有阴影会有点困难，我还没有解决方案。

jsfiddle 也有一个非常有用的整理按钮。

【讨论】：