CSS sign /Banner

[infinite]

hi

I am trying to create a Pure CSS Banner which would be shaped like a road sign – a rectangle going to a point(triangle)
i have a Photoshop version but wish to make the site responsive so would be best in CSS .

An example of what i wish to create in CSS can be seen here: https://www.dropbox.com/s/9l2eo1rqmegji45/stag.png

Any ideas on the best way to achieve such a shape?

[HoughtonA]

Here’s a quickie. I just adjusted the css from the text bubble in this, which you might find interesting. :)

[infinite]

@ HoughtonA
Thanks that’s a great start, i had a play around with CSS shapes earlier today but couldn’t get it right.
thanks that just the job

[infinite]

i have changed it slightly
updated sign
i have applied a shadow but its only around the rectangle?
– can you explain the div: before
thanks
darren

[HoughtonA]

Yeah, the before element is a psuedo element. It’s a part of the div that it’s selecting, but it’s not going to inherit some of the div’s css (and it’s not in the dom, so you can’t really mess with it in javascript).

EDIT: Your link works now. Yeah, you’ll need to change how the before element is displayed in order to get the shadow to look right. (right now, adding the shadow makes it a box (give me a minute))

[infinite]

cheers
i have altered it to include the stitch effect: http://codepen.io/pen/10237/5

[HoughtonA]

Here it is with updated shadows. This will only work in newer browsers, mind you.

[infinite]

thanks
that great, i can see what you have done now, is transform not supported in other browsers yet?

[HoughtonA]

http://caniuse.com/#search=transform :)

It’s css3 stuff. Old browsers and some mobile devices won’t support it. Internet Explorers 8 and under, for example.

[Author]

Posts