css3 三角形兼容 |css 文本控制

在CSS3之前，制作三角形需要使用CSS hack或者图片，而CSS3中出现了更加简便的方法。大家只需要利用CSS3的border属性，设置边框的样式、宽度和颜色，再将其中的三条边隐藏掉，便可以制作出三角形了。具体代码如下：

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

上面的代码会生成一个黑色的三角形，可以根据需要修改border-color属性中的颜色值来改变三角形颜色。同时，还可以通过修改border-width属性的值来调整三角形大小。

然而，这种制作三角形的方式并不兼容所有浏览器。在IE8及以下版本中，border-color属性不支持透明色的设置，会导致三角形无法正常显示。解决方法是添加下面的CSS hack代码：

.triangle {
*border-right-color: #000000;
*border-left-color: #000000;
*border-bottom-color: #000000;
border-color: transparent transparent #000000 transparent;
}

上述代码在IE8及以下版本中会优先执行，将border-right-color、border-left-color和border-bottom-color设置为黑色来实现三角形的显示。同时，在其他浏览器中则会正常使用原本的代码。

综上，利用CSS3制作三角形是一种简便的方法，但需要注意兼容性问题。在制作过程中，可以根据实际情况选择是否添加CSS hack等操作，提高页面的兼容性。