Scalable advanced big arrow

[basvandertogt]

Hello!

I’m trying to build this big arrow in css3: http://wolfsstyle.nl/example-bigarrow.png

I’m pretty far now but i have problems with the arrow on the bottom side. It should be scalable in width.
http://codepen.io/basvandertogt/pen/WQepoe?editors=110

Does anybody have some tips to make it work?

Regards,
Bas

[Paulie_D]

Use an SVG Image…the skewed method isn’t scalable without some advanced JS calculations AFAIK.

[gcyrillus]

you could give a try with vw and vh units and drawing the arrow with the border method, not looking so good though :)

http://codepen.io/gc-nomade/pen/EVYvgm

If that gives you some ideas …

[Paulie_D]

Been playing…not even close to perfect but it does scale and doesn’t use borders.

Breaks at some viewport sizes but I dunno…feels like there’s something there.

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

[bearhead]

Maybe this could work?
http://codepen.io/kvana/pen/jbNGGG

Its a variation on Paulie_D’s

[Paulie_D]

If you can use the dimensions of the pseudo element as percentages of the parent only instead of actual numbers it might work.

We want this to work with any arrow, not ones only related to viewport size.

[bearhead]

ok, I revised my codepen to something that might be closer to what the OP needed.

[gcyrillus]

@Paulie_D if viewport reference (box was 40% width = 40vw within op’s pen) is not welcome, then the pseudo element and box-shadow might do ? ;)

http://codepen.io/gc-nomade/pen/qOWJmg

however, the solution, IMHO, was to use an SVG image, as said

[Atelierbram]

however, the solution, IMHO, was to use an SVG image, as said

So that’s what I did here, because also thinking this made most sense. Forked the demo, and have it as an embedded SVG data background-image on a box that maintains aspect-ratio. Responsive typography with the help of a Sass-mixin.

http://codepen.io/atelierbram/pen/ojvaGR

[Author]

Posts