css三角形的实现原理

假设我们有这样一个div：

<div class="triangle"></div> <style> .triangle{ width:100px; height:100px; border:30px solid; border-color:green pink red purple; } </style>

你会看到：

我们去掉宽高：

.triangle{ width:0; height:0; border:30px solid; border-color:green pink red purple; }

变成了这样：

由于IE6的bug(高度为0的div会有一定默认的高度，需要做一些小调整，给div加一个overflow:hidden，IE6就能正确解析了。

现在我们可以实现任意三角形了，举例实现向上的三角形，那么将其他三个边的颜色设为透明保留底部边的颜色就可以了：

border-color:transparent transparent red transparent;

这样，三角形就实现了。

程序员青戈 认证博客专家 Java 架构 博客专家 Java程序员，5年一线大厂实战经验。关注我的原创微信公众号「Java学习指南」，回复「面试」可获取大厂通关面试题解一套。