- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 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 wondering if it’s possible to make a triangle made of borders from div responsive. Here is the code of that div:
width:0;
height:0;
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!
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.
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
Thanks for necro-posting.
I don’t think this isn’t any more responsive that using pixel values…(which technically you are) and media queries.