使用CSS创建铃声形状 [英] Create a bell shape with CSS
问题描述
我在使用css中的形状,想要做一个传统的钟形(认为圣诞铃声)。
这是我要去的一般形状(虽然我真的不在乎顶部和底部的球):
这里是我到目前为止: / p>
I am playing with shapes in css and want to make a traditional bell shape (think Christmas bell). Here's the general shape that I'm going for (though I really don't care about the balls on the top and bottom):
Here's what I have so far:
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;
}
But, I'm not sure how to get that curved look on the side and bottom. Any help would be appreciated.
EDIT: I've gotten closer by applying a radial-gradient to #bell:before and #bell:after. This gives me the curve on the side, now I just need the curve on the bottom. 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%);
}
Have a look at this one,
css
#bell {
left:300px;
top:20px;
position: relative;
}
#bell:before, #bell:after {
position: absolute;
line-height:0;
content:"\2315";
color:#d3d3d3;
font-size:100pt;
text-indent:30px;
top: 0;
width: 180px;
height:300px;
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%);
line-height:550px;
content:"\25CF";
color:#d3d3d3;
font-size:130pt;
text-indent:-15px;
}
ya its not exactly same as in the question, but came close.
EDITED
这篇关于使用CSS创建铃声形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!