If this is in concert with something like a tooltip bubble, or similar, using it as an arrow, I think you could make it somewhat responsive, by replacing px values with em or rem. If your body has the typical font-size: 62.5%; so that 1em is usually 10px, then the math is easy when using rem, and not terribly difficult for em.
The trick would be to set media query breakpoints that appropriately reset font-size at lower resolutions. Ideally, you could use em as a base unit, reduce font-size only on the immediate parent element of the triangle (thus effecting the triangle, but nothing else on the page), and it would shrink the triangle.
Edit: Yeah, I cannot seem to get this to work in practice. Nevermind, I suppose.
Hello. I'm wondering if it's possible to make a triangle made of borders from div responsive. Here is the code of that div:
This one is't responsive. If you use '%' instead of 'px' it does not work. I really don't want to use an image here. Thanks for the help!
Nope...you can't use % in borders so responsiveness is something we haven't been able to manage on this as yet on a pure CSS basis.
...and we've tried.
Thanks. That was fast :)
That's not to say someone hasn't come up with since the last time.
Anyone? Remember HTML & CSS only.
If this is in concert with something like a tooltip bubble, or similar, using it as an arrow, I think you could make it somewhat responsive, by replacing px values with em or rem. If your body has the typical
font-size: 62.5%;so that 1em is usually 10px, then the math is easy when using rem, and not terribly difficult for em.The trick would be to set media query breakpoints that appropriately reset font-size at lower resolutions. Ideally, you could use em as a base unit, reduce font-size only on the immediate parent element of the triangle (thus effecting the triangle, but nothing else on the page), and it would shrink the triangle.
Edit: Yeah, I cannot seem to get this to work in practice. Nevermind, I suppose.