使用CSS创建钟形

我正在玩css中的形状，想做一个传统的钟形（想想圣诞钟）。 这是我想要的一般形状（尽管我真的不在乎球的顶部和底部）：

以下是我目前掌握的情况：

但是，我不知道如何在侧面和底部获得弯曲的外观。任何帮助都将不胜感激

编辑：我对#bell:before和#bell:after应用了一个径向渐变，从而更加接近了。这给了我侧面的曲线，现在我只需要底部的曲线

---

我试着用你的方式帮助你（是的，很难！） 我得到的最好的结果是：

---

你可以在Illustrator中计算出你的铃铛的大小（我为你画了一个），但这里是你的概念证明，作为

CSS中的
背景图像

看看这个



css

是的，这和问题不完全一样，但很接近

已编辑


虽然我喜欢css（我们在工作中只支持IE8，所以我不想使用CSS3:-（），我认为应该用css做更多的事情。这似乎是一个明显的例子，只使用图像。只使用我的视图。更好的是，使用SVG！如果你使用内嵌SVG，你甚至可以使用CSS3动画和转换来制作动画（显然在旧的浏览器中不起作用）。你必须要么a）使用一些半径增大或减小的短圆弧，要么b）使用抛物线数学来实现这一点。我同意这可能不值得努力。@isherwood我很想看看这个解决方案，不管是否有人可以制作：）你可以用小提琴和倒置的圆形制表符来做吗？这需要两个要素，最有可能是银行。它没有我想要的曲线，但是使用圆字符是一个好主意。从实用的角度来看，这可能是一个不错的选择。但是，由于我正在css中试验形状，我不想走图像路线。尽管如此，我还是对SVG代码如此之小感到惊讶。谢谢你。底部仍然没有曲线，但很好。在Safari和Chrome中，底部的球有额外的人工制品。但老实说，我不在乎球在底部。添加了底部曲线的形状。
#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 {
    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%);
}

#bell { 
    left:100px;
    position: relative;
}
#bell:before, #bell:after {
    position: absolute;
    content: "";
    left: 50px; top: 0;
    width: 320px;
    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;

    line-height:740px;
    content:"\25CF";
    color:#d3d3d3;
    font-size:200pt;
}

  #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;
}