CSS 形状入门（一）

第一次看到 CSS 形状是在 N 年前的谷歌首页顶部产品导航栏里面有一个向下的三角图标，一开始以为是一个小的图片，后来一想按照谷歌的作风页面肯定是越简洁越好，在首页只可能放一个 logo 图片不可能为了那么一个小小的图标再多添加一张，然后我就查看了那个部分的源码，果然是用纯 CSS 写的：

width: 0px;
height: 0px;
border-top: 3px solid #c0c0c0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;

在 width 和 height 都为 0px 的情况下为什么仅用 border 就能实现一个三角形状呢？如果我们把四个边框都设置成不同的颜色就能一目了然了：

width: 0px;
height: 0px;
border-top: 50px solid red;
border-left: 50px solid blue;
border-right: 50px solid yellow;
border-bottom: 50px solid green;

这时如果把左边框和右边框颜色都设为透明，下边框可以去掉，就变成了一个向下的红色箭头：

width: 0px;
height: 0px;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

改变一下边框的宽度就能变成各种形状的三角形，比如等边三角形：

width: 0px;
height: 0px;
border-top: 86.6px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

如果把左边框去掉会变成这个形状：

width: 0px;
height: 0px;
border-top: 50px solid red;
border-right: 50px solid transparent;

这些只是最基本的 CSS 形状，好处是兼容各种浏览器，但是不能实现更复杂的形状，如果要更复杂的形状就要用到 ::before 和 ::after 这样的伪元素，下次会详细讲述。