css三角形兼容

在前端开发中，需要经常使用到CSS三角形，特别是在制作箭头、提示框等时，很常见的就是用CSS来制作三角形。然而，不同浏览器对CSS的支持度不同，如何兼容不同浏览器成为了一个挑战。下面将为大家介绍CSS三角形的兼容问题及解决方法。

一、使用CSS border属性制作三角形

 .triangle{
      width: 0;
      height: 0;
      border-width: 10px 10px 0;
      border-style: solid;
      border-color: #000 transparent;
  } 

通过设置3个border的宽度和颜色来实现三角形的效果，这种方法在现代浏览器中兼容性非常好。但是在 IE6/7/8浏览器中，由于border和background-color不能同时生效的缘故，导致三角形显示不出来，需要使用Hack的方式来兼容。

二、使用CSS transform属性制作三角形

 .triangle {
      width: 0;
      height: 0;
      border-width: 10px 10px 0 10px;
      border-style: solid;
      border-color: #000 transparent;
      transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -o-transform:rotate(45deg);
  } 

这种方法使用transform属性来实现三角形的效果，在现代浏览器中同样兼容性非常好。但是在IE6/7/8浏览器中并不支持transform属性，因此需要使用JavaScript或Hack的方式来兼容。

三、使用伪元素:before或:after制作三角形

 .triangle:before {
      content:';
      display:inline-block;
      border-width: 10px 10px 0 10px;
      border-style: solid;
      border-color: #000 transparent;
      transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -o-transform:rotate(45deg);
      margin-right: 10px;
  } 

这种方法使用伪元素:before或:after来实现三角形的效果，同样适用于现代浏览器，但需要注意的是，在某些版本的IE中伪元素不支持，因此需要使用JavaScript或Hack的方式来解决兼容性问题。

总结：不同浏览器对CSS的支持度不同，因此需要使用不同的解决方法来兼容。以上三种方法都是主流的解决方案，因此在实际开发中应根据具体情况选择合适的方法来处理CSS三角形的兼容问题。