CODEWITHSUNDEEP
htmlcss
Isuru
Isuru

Reputation: 31283

Ring shaped div

Actually I have 2 questions here. I'll explain them as much as I can.

I'm trying to create a ring shaped div. Below is what it should look like.

enter image description here

This is what I have done so far. How can I get the slight curve from left bottom corner to the top? And how can I create the inverted curve for the right side?

Thank you.

Upvotes: 0

Views: 1405

Answers (2)

Eamon Nerbonne
Eamon Nerbonne

Reputation: 48066

You could add a second circle that whites-out the portion of the image you don't want to see.

For example, if you add a second div (inside the first) with id cutout and style it as follows:

#cutout {
    top:250px;
    border-radius: 700px;
    border:300px solid #eee;
    z-index:1;
    left:200px;
    height:200px;
    position:absolute;
}

Then in your image you'll get a little closer to what you want. You'll also want to add position: relative to your container div to ensure that's what it's positioned and clipped to.

Finally, if you want clip the ring segment as shown in your image, you'll need to add an extra outer div just to clip the innermost two; and you should replace the image with a radial background.

That'd look approximately like: http://dabblet.com/gist/4571882

Image: css-based-variant

Honestly though, I'm not sure contortions like this work very well - you'll usually not get exactly the result you wanted, and it's likely not to work on older browsers very well; nor for that matter necessarily on newer browsers that implement a newer version of these CSS properties.

Upvotes: 1

mavili
mavili

Reputation: 3424

you could try creating a new div and adding

border-top-right-radius: XXX

for the inverted segment. Making sure they float correctly (e.g. float:left).

Upvotes: 0

Related Questions