- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
Use an SVG Image…the skewed method isn’t scalable without some advanced JS calculations AFAIK.
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 …
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.
Maybe this could work?
http://codepen.io/kvana/pen/jbNGGG
Its a variation on Paulie_D’s
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.
ok, I revised my codepen to something that might be closer to what the OP needed.
@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
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.