我正在玩css中的形状,并想做一个传统的铃铛形状(想想圣诞铃铛)。这是我想要的一般形状(尽管我真的不关心顶部和底部的球):
这是我到目前为止所拥有的:
http://jsfiddle.net/bhlaird/NeBtU/
#bell {
left:300px;
position: relative;
}
#bell:before, #bell:after {
position: absolute;
content: "";
left: 50px; top: 0;
width: 180px;
height:400px;
background: #d3d3d3;
border-radius: 150px 150px 150px 20px;
-webkit-transform: rotate(15deg);
-webkit-transform-origin: 0 0;
}
#bell:after {
left: 0;
-webkit-transform: rotate(-15deg);
-webkit-transform-origin:100% 0;
border-radius: 150px 150px 20px 150px;
}
但是,我不确定如何在侧面和底部获得弯曲的外观。任何帮助,将不胜感激。
编辑:通过对#bell:before 和#bell:after 应用径向渐变,我已经更接近了。这给了我侧面的曲线,现在我只需要底部的曲线。 http://jsfiddle.net/NeBtU/2/
#bell {
left:300px;
position: relative;
}
#bell:before, #bell:after {
position: absolute;
content:"";
top: 0;
width: 180px;
height:400px;
background: #d3d3d3;
}
#bell:before {
left: 50px;
border-radius: 150px 150px 20px 30px;
-webkit-transform: rotate(15deg);
-webkit-transform-origin: 0 0;
transform: rotate(15deg);
transform-origin: 0 0;
background: radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
background: -webkit-radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
}
#bell:after {
left: 0;
-webkit-transform: rotate(-15deg);
-webkit-transform-origin:100% 0;
transform: rotate(-15deg);
transform-origin:100% 0;
border-radius: 150px 150px 30px 20px;
background: radial-gradient(230px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
background: -webkit-radial-gradient(230px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
}