纯css实现三角形

先看一个笔试题：

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

一开始看到这个题目，我有些不知如何下手，之前看到这种小三角形，以为只是一个png，都没有注意过这个问题。

废话不多说，进入正题：可以将那个三角形理解为一个小正方形，先将其width和height设置为0，然后设置其border宽度为10px（见下图）。

1 {
2 width: 0;
3 height: 0;
4 border: 10px solid #000;
5 }

这样就得到一个边为20px的正方形。

接下来是重点，我们不妨先来看看这个例子：

1 {
2 width: 0;
3 height: 0;
4 border-top: 40px solid #000;
5 border-right: 40px solid #ff0000;
6 border-left: 40px solid #ff0000;
7 border-bottom: 40px solid #000;
8 }

结果：

为何会这样呢，我们可以想象一下，除对边颜色相同外一模一样的四条边拼成一个正方形，各边互不想让，最好的办法就是平均，所有就有这个结果了。

现在回到上面的问题，如果只有一条边有颜色，其他三条边都是透明的（尽管透明，但是还是存在的），是不是我们就看到了一个三角形。

{ 
width: 0;
height: 0; 
border: 10px solid transparent; 
border-left: 10px solid #000; 
position: absolute; top: 18px; 
left: 100%; 
content: '';
}

与题目对比，基本上ok了。只需再在黑色三角形内部画一个小的白色的三角形，就完成了。

完整代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>纯css实现三角形</title>
 6     <style>
 7         #triangle{ width: 96px; height: 96px; border: 2px solid #000; position: relative;}
 8         #triangle:before{ width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid #000; position: absolute; top: 18px; left: 100%; content: '';}
 9         #triangle:after{ width: 0; height: 0; border: 8px solid transparent; border-left: 8px solid #fff; position: absolute; top: 20px; left: 100%; content: '';}
10     </style>
11 </head>
12 <body>
13     <div id="triangle"></div>
14 </body>
15 </html>

效果图：

参考：《终于搞懂了CSS实现三角形图标的原理》.推酷

任何转载：请注明本文地址