How to create different shape in css?

Tags: css,css3,css-shapes

Problem :

I want to create a shape like the uploaded image wiht css. Please let me know how to do this.

Thanks

---

Solution :

It's not difficult. You create a circle within a wrapper that clips out what you don't need.

demo

HTML:

<div class='shape-wrap'>
    <div class='shape'></div>
</div>

Relevant CSS:

.shape-wrap {
    overflow: hidden;
    width: 32em; height: 8em;
}
.shape {
    box-sizing: border-box;
    margin: -175% -50%;
    width: 200%; height: 800%;
    border: solid 2em dodgerblue;
    border-radius: 50%;
    box-shadow: inset 0 0 .5em .25em dimgrey;
}