Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I would like to create a irregular shape in CSS like one below . I want to avoid putting image as background completely . Please help me in this regard..Thanks

Bijeeshenter image description here

share|improve this question
5  
This question appears to be off-topic because it is about CSS. Try posting on Stack Overflow instead. –  ckpepper02 Dec 7 '13 at 2:20
2  
You can write a SVG shape directly in your code. –  Paolo Gibellini Dec 7 '13 at 6:21
add comment

closed as off-topic by ckpepper02, Scott, Johannes, e-sushi, Gramps Dec 8 '13 at 5:11

  • This question does not appear to be about graphic design within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

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

CSS shapes example

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.

share|improve this answer
    
I think you could do what he asks; with css3 shapes; see below. –  Random O'Reilly Dec 8 '13 at 19:03
add comment

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

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).

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.