Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. 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

closed as off-topic by ckpepper02, Scott, Johannes, e-sushi, Matt 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.

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

2 Answers 2

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. –  Benteh Dec 8 '13 at 19:03

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

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