How to create different shape in css?

Problem

enter image description here

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

Thanks

Problem courtesy of: user1559230

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;
}
Solution courtesy of: Ana

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.