Home › Forums › CSS › Responsive triangle › Reply To: Responsive triangle
December 2, 2014 at 9:35 am
#189751
bitaru
Participant
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