: How Can I create a irregular shape in CSS without an image? I would like to create a irregular shape in CSS like one below . I want to avoid putting image as background completely . Please

@Harper654

You could do something like that with css - try this links for an intro to shapes designed with css: css-tricks.com/examples/ShapesOfCSS/ or: www.css3shapes.com/

In addition then, you would have to experiment with box-shadows.

(this is, as @ckpepper02 points out, a question better suited for Stack Overflow, and you could start by searching for "css shapes" there. You will find some interesting stuff).

Vote Up Vote Down

@Ravi4787994

This is not currently possible with CSS. The closest thing I know of is an experimental feature that lets you fit text into a shape, but it is as of yet very poorly supported.

Adobe HTML: Shapes



If you load it in a browser that supports it, then the custom raven shape is set purely by CSS. Here's the webkit prefix style:

-webkit-shape-inside: polygon(59.015% 76.618%, 49.316% 72.894%, 35.699% 69.153%, 26.106% 58.415%, 20.799% 48.452%, 16.814% 38.447%, 16.595% 26.175%, 18.384% 21.205%, 18.719% 18.314%, 18.022% 17.236%, 16.997% 15.669%, 15.588% 13.887%, 13.017% 12.713%, 9.541% 12.314%, 0.469% 10.522%, 0.000% 9.789%, 11.564% 5.846%, 13.017% 5.484%, 15.253% 4.942%, 21.179% 1.780%, 24.165% 0.000%, 33.508% 0.000%, 38.364% 2.949%, 42.507% 6.335%, 49.130% 11.182%, 54.641% 17.128%, 58.535% 18.696%, 76.920% 38.014%, 79.253% 45.400%, 83.900% 59.241%, 84.697% 63.008%, 87.793% 70.424%, 91.912% 79.192%, 98.501% 89.538%, 97.737% 90.015%, 97.149% 89.675%, 96.576% 90.782%, 97.177% 92.724%, 100.000% 97.907%, 96.912% 99.884%, 94.298% 97.546%, 92.174% 97.456%, 78.240% 97.907%, 69.457% 86.842%, 62.881% 80.381%, 59.015% 76.618%, 59.015% 76.618%);


However, this is only to apply a shape to text. You could not currently style this shape, such as add a background color or a stroke. As Paolo suggests, you could use SVG to do that, which is supported inline for HTML5.

Vote Up Vote Down