我正在尝试在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%);
}
关于如何解决这个问题的任何想法?
答案 0 :(得分: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;
}
答案 1 :(得分:2)
查看我的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 :(得分:0)
如果图形中“不存在”的部分不一定是透明的,那么你可以制作一个普通的矩形,然后建立一个弯曲的形状,它将位于矩形的顶部并具有与背景颜色相同。
.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有一个非常有用的整理按钮。