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

- Barbara Laird

---

尽管我喜欢CSS（我们工作只支持IE8，所以我不能使用CSS3 ：-（），并认为应该用CSS做更多的事情。但这似乎是一个明显的情况，只需使用图片即可。这只是我的观点。 - Cruncher

最好使用SVG！如果您将其作为内联SVG实现，甚至可以使用CSS3动画和过渡进行动画处理（显然，在较旧的浏览器中无法工作）。 - Fernker

你需要使用一系列半径递增或递减的短弧线，或者使用抛物线数学来实现这个目标。我同意这可能不值得花费这么多精力。 - isherwood

@isherwood，我很感兴趣看到解决方案，无论是否有人能够提供它 :) - Cruncher

人们也看《杰瑞·斯普林格秀》。;-) - isherwood

你可能可以通过使用你已经结合了倒置的圆形标签（就像Lea Verou发布的那样）的小提琴来完成它吗？很可能需要两个元素。 - Zach Saucier

Answer 1

请看这个例子：

jsFiddle DEMO

css

这个例子展示了一个形状，使用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演示

- Sobin Augustine

---

谢谢。底部仍然没有曲线，但已经很好了。在Safari和Chrome中，底部的球有额外的伪像。但是说实话，我不在意底部的球。 - Barbara Laird

将底部曲线添加到形状中。 - Sobin Augustine

Answer 2

你可以在Illustrator中计算出铃铛的大小（我为你画了一个），但这是你的概念证明，作为CSS中的background-image。 http://jsfiddle.net/itsmikem/Rs6aa/

- itsmikem

---

从实际角度来看，这可能是最好的方法。但是，由于我正在尝试在CSS中使用形状，我不想走图像路线。虽然，我很惊讶SVG代码有多小。谢谢。 - Barbara Laird

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

- inon

---

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