css - 使用 CSS 创建钟形

Question

我正在玩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%);
}

Answer 1

看看这个，

jsFiddle 演示

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 演示

Answer 2

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

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

Answer 3

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

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