使用 CSS 创建钟形答案

【问题标题】：Create a bell shape with CSS使用 CSS 创建钟形
【发布时间】：2013-10-30 12:25:04
【问题描述】：

我正在玩 css 中的形状，并想制作一个传统的铃铛形状（想想圣诞铃铛）。这是我想要的一般形状（虽然我真的不关心顶部和底部的球）：

这是我目前所拥有的：

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

【问题讨论】：

虽然我喜欢 css（我们工作时只支持 IE8，所以我不会使用 CSS3 :-( )，并认为应该用 css 做更多的事情。这似乎是一个明显的案例只用一张图片。只是我的看法。
更好的是，使用 SVG！如果您将其作为内联 SVG 进行，您甚至可以使用 CSS3 动画和过渡对其进行动画处理（显然不适用于旧浏览器）。
您将不得不 a) 使用一些半径增大或减小的短弧，或者 b) 使用抛物线数学来实现这一点。我同意这可能不值得付出努力。
@isherwood 我很想看看解决方案，不管是否有人可以生产它:)
您也许可以使用与倒置圆形标签like Lea Verou posted about 结合的小提琴来做到这一点？最有可能需要两个元素

标签： css shapes css-shapes

【解决方案1】：

我试图以你的方式帮助你（是的，这很难！）我得到了最好的：

http://jsfiddle.net/NeBtU/1/

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

【讨论】：

感谢您的努力。它没有我要找的曲线，但使用圆形字符是个好主意。

【解决方案2】：

您可以在 Illustrator 中计算出铃铛的大小（我为您画了一个），但这是您的概念证明，CSS 中的 background-image。

http://jsfiddle.net/itsmikem/Rs6aa/

【讨论】：

从实际的角度来看，这可能是要走的路。但是，由于我在 css 中试验形状，我宁愿不走图像路线。不过，我对 SVG 代码的大小感到惊讶。谢谢

【解决方案3】：

看看这个，

jsFiddle DEMO

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

是的，它与问题中的不完全相同，但接近了。

已编辑

jsFiddle DEMO

【讨论】：

谢谢。底部仍然没有曲线，但是还不错。在 Safari 和 Chrome 中，底部的球有额外的伪影。但老实说，我不在乎底部的球。
将底部曲线添加到形状中。