[Solved] Creating a 'Signpost' shape with CSS, (oblong with a pointed end).

[luccombelad]

Hi Y’all.

I’m trying to create a signpost shape in CSS.

For example: An oblong shape with a pointed end. An example would be a classic footpath sign.

A google search doesn’t reveal anything.

Does anyone think this is possible with CSS.

[Paulie_D]

It’s entirely possible…weirder shapes than that too, you’d be amazed.

https://css-tricks.com/examples/ShapesOfCSS/

Your signpost would simply be an HTML element (a rectangle) and a ‘pseudo-element’ at whatever end which would use the CSS triangle/borders technique.

http://codepen.io/Paulie-D/pen/b16eb69676be73626013d1308fec4749

This one is a little more advanced but you can easily see how it most definitely can be done.

[Paulie_D]

Here’s a simpler version with some notes.

It’s a little verbose in the CSS but I left in the individual border colors of the triangle so you can see how and when they appear just by changing the color from transparent to something else.

http://codepen.io/Paulie-D/pen/vKkmq

[luccombelad]

Thanks guys…

[luccombelad]

Thanks guys….

I’ve got the principle.

But I’m struggling to use it the context I need. I hope this explains:

http://codepen.io/LaurenceBaker/pen/sfqzI

[Paulie_D]

OK….firstly you have to make some space for the triangle to be…so a little margin right..

Then it’s pretty much as before.

http://codepen.io/Paulie-D/pen/pgEtz?editors=010

BUT …

You know that 1px border you have before…that’s a problem…because the triangle part is a border…and borders can’t have borders.

So that has to go.

There are a couple of things we can do to punch it up a bit but they are fairly new and so really only effective in modern browsers.

For an example…I threw on a dropshadow.

[luccombelad]

Firstly thanks…..Paulie….I really do appreciate your help.

It consoling to know that sites like this exist.

I thought the original border might be a problem. So, I was willing to lose it

[Paulie_D]

I thought the original border might be a problem. So, I was willing to lose it

To be honest,we could have replicated it…but it would mean an extra pseudo-element which would make it quite fiddly and unresponsive.

Howver, happy to have helped.

[Paulie_D]

I’ve seen examples where there’s both a :before and and :after making stacked, different-size triangles to give the illusion of a border on the triangle but when you have to go to that much work, an image might be the better choice.

Yeah…that’s what I meant by

To be honest,we could have replicated it…but it would mean an extra pseudo-element which would make it quite fiddly and unresponsive.

I wouldn’t generally bother.

[Author]

Posts