# February 15, 2013 at 2:08 pm
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:
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #aad86c;
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!# February 15, 2013 at 2:34 pm
This reply has been reported for inappropriate content.
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.# December 2, 2014 at 9:35 am
How about this example?
.triangle position: relative font-size: 20px &:before, &:after content: " " border-style: solid position: absolute width: 0 height: 0 z-index: 10 .triangle-top &:before, &:after border-color: transparent transparent $grey2 transparent border-width: 0 em(8) em(7) em(8) bottom: 0 left: 50% margin-left: - em(8) &:after border-color: transparent transparent white transparent bottom: -1px margin-left: - em(8)
After you can simple change font-size of .triangle class to make triangles smaller or larger e.g:
.triangle.large fone-size: 30px
it works in Chrome, Opera, Safari, FF on Mac OS
You must be logged in to reply to this topic.