Create a bell shape with CSS

Question

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):

enter image description here

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

While I like css(We only support IE8 at work, so I don't get to use CSS3 :-( ), and think more things should be done with css. This seems like an obvious case to just use an image. Just my view. — Cruncher
– Cruncher, Commented Oct 21, 2013 at 20:41
Better yet, use an SVG! If you do it as an inline SVG you can even animate it using CSS3 animations and transitions (obviously won't work in older browsers). — Fernker
– Fernker, Commented Oct 21, 2013 at 20:42
You're going to have to either a) use a number of short arcs with increasing or decreasing radii, or b) use parabolic math to achieve this. I agree that it's probably not worth the effort. — isherwood
– isherwood, Commented Oct 21, 2013 at 20:50
@isherwood I would be interested to see the solution regardless if someone could produce it :) — Cruncher
– Cruncher, Commented Oct 21, 2013 at 20:54
You might be able to do it with the fiddle you have combined with an upside down rounded tab like Lea Verou posted about? It'd take two elements most likely — Zach Saucier
– Zach Saucier, Commented Oct 21, 2013 at 22:01

Sobin Augustine · Accepted Answer · 2013-10-22 21:05:23Z

9

Have a look at this one,

jsFiddle DEMO

result shape

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

jsFiddle DEMO

enter image description here

edited Oct 22, 2013 at 21:05

answered Oct 22, 2013 at 20:03

Sobin Augustine

3,7752 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barbara Laird Over a year ago

Thank you. The bottom still doesn't have the curve, but it's pretty good. In Safari and Chrome, the ball at the bottom has extra artifacts. But honestly, I don't care about the ball at the bottom.

Sobin Augustine Over a year ago

added the bottom curve to the shape.

itsmikem · Accepted Answer · 2013-10-22 17:20:41Z

4

You can work out the size of your bell in Illustrator (I drew one for you), but here's your proof of concept, as a background-image in CSS.

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

answered Oct 22, 2013 at 17:20

itsmikem

2,1782 gold badges26 silver badges32 bronze badges

1 Comment

Barbara Laird Over a year ago

From a practical point of view, this is probably the way to go. But, since I'm experimenting with shapes in css, I'd rather not go the image route. Though, I am amazed by how small the SVG code is. Thanks

inon · Accepted Answer · 2013-10-22 08:53:24Z

3

I tryed to help you, with your way (Yes, It's hard!) and that the best I got:

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

answered Oct 22, 2013 at 8:53

inon

1,8021 gold badge21 silver badges35 bronze badges

1 Comment

Barbara Laird Over a year ago

Thanks for the effort. It doesn't have the curves I'm looking for, but using the circle character is a great idea.

Collectives™ on Stack Overflow

Create a bell shape with CSS

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related