zvashg
Last Updated: February 25, 2016
·
1.922K
· demiazz
71e9761dce27485eb3ced22ed60f59d1

CSS triangles and cross browser compatibility

Don't use transparent in CSS styles for triangle shapes:

.wrong-triangle {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  border-left: 5px solid transparent;
}
.right-triangle {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid black;
  border-left: 5px solid rgba(255, 255, 255, 0);
}

FF generate artefacts (borders) when used transparent.

Say Thanks
Respond