How to create different shape in css?


Tags: css,css3,css-shapes

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



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

    CSS Howto..

    How to stick a div when scrolled past 50% of the item?

    How can i achieve this style in Html/Css?

    CSS - How to align drop-down sub menu to the parent's right?

    In javascript, how to get a class name from a td cell?

    What is the best way to store css data inside database and call it similar to how a css file would be

    How to remove “pictureframe” in Internet Explorer?

    How to align multiple images horizontally (in a row)?

    How to set overflow content to go underneath instead of fitting in one row

    how to make the osx-like border on css?

    How to Get Fixed Children to Play Nicely with their Parents

    How to call in Javascript a requestAnimationFrame loop?

    css how to center this content

    How to make text box scroll vertical in overflow css html?

    how to properly override CSS in external file

    How to set margin left and right to the center div when using float:left

    How to set browser full width navigation?

    how can i add extra element style for external css file?

    gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget

    How to dynamically allocate block of text using css?

    Javascript - how to show and hide an element per second?

    How to make a font gisha-regular?

    How to override a style of a specific Joomla module?

    HTML/JavaScript - How can I hide the links and cursor?

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How to get the first parent that has a certain CSS property using jQuery?

    How to add own icons in bootstrap navbar

    How do I style jQuery UI tabs vertically with a correctly themed border?

    how can I set the opacity of the background of a span, but not the text? [duplicate]

    How to make a thicker text shadow using css?

    how to change the background of a css-class by hover a button?