纯CSS绘制三角形原理分析因为之前一个页面上有很多三角形，一开始直接用图片感觉不太好，而且颜色总是怪怪的，很难调背景都是一样的，于是搜了一波代码，直接用了。想了想，也不知道具体原理是什么。很奇怪为什么边框可以设置成三角形的样式。于是搜了一波原理，整理如下1.边框是什么样子的？因为很少使用很粗的边框，而90%的时候我们使用相同颜色的边框。所以我发现我不知道边界长什么样子，我一直以为四个边是一条线（别告诉我只有我这么想）。经过实验发现，当边框越来越粗时，很明显每一边都是梯形。2.如何制作三角形？因为我之前看的代码都会写width:0;高度：0；当时不明白为什么，现在很容易想到，在思维极限下，当内容大小趋近于零时，每条边都变成了三角形。这时候可以看到三角形已经出现了。我们所要做的就是将其他边设置为透明以获得我们需要的三角形。3.还有没有病例？分别取消边界，发现有以下情况：取消一侧时，相邻两条边与该侧的接触部分会变直；当只有相邻的边时，这两条边会变成二等分三角形，当剩下的边没有其他接触时，一切都消失的极限情况。4.扩展明白了这些之后，看代码是不是感觉很清晰？然后我们可以制作更多形状的三角形。有了这些形状和旋转属性，基本上所有的场景都可以使用。Rightangletriangle.box{/*内部尺寸*/width:0px;高度：0px；/*bordersize只设置三边*/border-top:#4285f4solid;border-right：透明实体；左边框：透明实体；边框宽度：85px；/*其他设置可选*/margin:50px;}较小的直角三角形用反面做一个较小的直角三角形.box{/*内部大小*/width:0px;高度：0px；/*bordersize只设置两侧*/border-top:#4285f4solid;border-right：透明实体；边框宽度：85px；/*其他设置*/margin:50px;}等腰锐角三角形可以通过改变底边的长度做出各种三角形。box{/*内部尺寸*/width:0px;高度：0px；/*边框大小*/border-top:#4285f4170pxsolid;border-right：透明的85px实体；左边框：透明的85px实体；/*其他设置*/margin:50px;}对话气泡将伪元素设置成三角形，然后通过定位确定位置，就可以制作出经典的对话气泡了。.bubbly{位置：绝对；顶部：30%；左：50%；转换：翻译（-50%，-50%）；背景：#00ccbb；边界半径：8px；宽度：200px；填充：40px10px；文本对齐：居中；白颜色;font-size:20px;.bubbly:after{content:'';位置：绝对；底部：0；左：50%；边框：34px实心透明；边框顶部颜色：#00ccbb；底部边框：0；左边框：0；margin:00-34px-17px;}总结通过设置四个边的长度，还可以做出各种三角形，几乎所有三角形的形状都可以套出来。另外，还可以通过设置width和highschool一项为0，另一项不为0来设置bodyshape的形状，大家可以自由试验
