css3写小三角

CSS3提供了很多方便的选择器以及简单易用的功能来创建独特的样式。其中之一就是使用CSS3来创建漂亮的小三角。

.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f00;
}

上面的代码可以创建一个红色的往下的小三角。其中，width和height都为0，是因为我们只需要利用CSS3的border来创建边框。border-left和border-right设置为透明，这样就只有border-bottom显示出来，即形成三角形。

如果要创建其他颜色、方向的小三角，只需要调整border的方向和颜色就可以了。

.arrow-right {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #0f0;
}
    

上面的代码可以创建一个绿色的往右的小三角。与之前的代码类似，只是改了border的方向和颜色。

利用CSS3创建小三角并不难，但要注意的一点是，它只在支持CSS3的现代浏览器上才能完美显示。对于那些老旧的浏览器，需要提供一些备选方案。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！