[CSS LEARN]Border与多边形

Border

css中的边框属性，是一个复合属性，其具体属性有：

border-width: 0 5px 5px 5px;

border-style: solid;

border-color: transparent transparent blue transparent;

上面的这个属性所定义的一个块元素，在不设置宽高的情况下，渲染出来是什么呢？是一个

蓝色朝上边长5px的等边三角形！（视觉上）

其中原理很简单，在有边框元素宽高为0的时候其实绘制出来同样是一个矩形块。这块矩形块由三块透明的等边三角形以及一个蓝色三角形组成，所占的元素块大小为：

宽： 10px

高： 5px

经过我自己的实测后其等式为：

宽 = border-right-width + border-left-width

高 = border-top-width + border-bottom-width

平行四边形

首先，平行四边形进行拆分 = 两个对称的三角形

接下来就很简单了，为上面的蓝色三角形元素添加一个伪类，进行对称三角形制造，然后进行绝对定位拼接。

是不是很easy？

多边形..

同理可得更多的多边形，原理类似，就是制造更多的三角形进行拼接，这个就类似于微积分计算一般，计算基值（极小值），然后进行积分拼接就得到原本不能得到的结果了。

不等边三角形/直角三角形定制

其实同样是套用上面宽高的两个公式后再结合第三条公式：

偏差值X = Max(border-right-width, border-left-width) - 元素宽/2

偏差方向 = Max(border-right-width, border-left-width) === border-right-width ? 'right' : 'left'

偏差值Y = Max(border-top-width, border-bottom-width) - 元素高/2

偏差方向 = Max(border-top-width, border-bottom-width) === border-top-width ? 'top' : 'bottom'

即： 

（左 - 右）/2， （上 - 下）/2（参考translate(x,y)方向得出）

得出该值后将矩形块对角线相交点进行平移后即得到相应的四个三角形的顶点（在一个点上）所在。

由此你可以定制自己想要的不等边三角形了，挪（顶点）偏差值就是了。

由于本文撰写过程中没有顺手截图，请自行打开w3school类教学网站实践结合！不然就有些抽象！！（眼过千遍，不如手过一遍）

至于直角三角形，更简单了，把顶点挪到矩形的任一边上时就是一个直角三角形了！（这里不给代码提示了，自己实践结合以上就很简单了）

转载于:https://juejin.im/post/5c753321e51d450b9c631b46