css生成各类图形详解

css面试题之生成各类常见图形

最近一直在看面试题，发现了一些有趣的东西，有不少东西之前不是很懂，都停留在使用的层次上，因此如今开始恶补基础。恰好了看到了一个面试题，感受之前没有对这个知识点了解的深刻，所以如今作个笔记，防止本身忘记。若是你是一名前端开发人员，那么你必定熟悉css吧！那你试一下用纯css实现一个三角形、五角星、平行四边形？用css生成的各类图形基本上都依赖于border、border-radius属性。这里不记录具体怎么用css实现一个图形，只说明如何利用这两个属性，固然除了这两个属性以外，复杂的图形还须要用before、after这两个强大的伪类。

在解释如何用border生成图形以前先来增强一个认识，先声明一个div，而后设置border效果以下：

为何border是梯形呢？详解以下图：

border的上边宽由content宽度决定（就是图片的内容width）下边框等于content宽度+左右两边border宽度，高度等于咱们设置的border大小，并且边框相接的地方是各自一半；所以要用css造成一个三角形就很简单了，三角形只有三边，那么就设置内容width等于0，这样就达到了三边的目的了。可是宽度呢？因为border下边宽的高度由三部分组成：内容宽度、左、右border宽度。所以宽度能够经过设置border-left、border-right来完成，高度就直接设置border大小就能够了。造成过程以下图：

根据该推理得出的代码以下，能够将一下代码在本身本地编辑器进行验证：

.tranigle {
  height: 0;
  width: 0;
  border-bottom: 100px solid yellowgreen;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
复制代码

这只是其中的一种，根据上面的原理，还能够实现直角三角形（border-left和border-right设置一个就行）、等腰直角三角形等等。

理解了上面的实现原理几乎就能够实现不少图像了，好比椭圆（利用border-radius能够设置两个半径）、五角星（使用一个三角形加上before、after拼接成另三个角）、六角形（两个三角形）、八角形（两个四边形，旋转必定角度transform: rotate(45deg)）、十二角形（三个四边形，旋转必定角度）、吃豆人（就是一个圆，隐藏右边的90度）、平行四边形（矩形，变形skew）等等。这里有一篇文章实现了大部分图形45个值得收藏的 CSS 形状。