Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive triangle Reply To: Responsive triangle

#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