摘要明天小编就给大家讲解一下用CSS绘制三角形的实现代码（边框方法）。 我认为男人应该关注这个话题。 小编还收集了用CSS绘制三角形的资料。
明天小编就给大家讲解一下CSS绘制三角形的实现代码（border方法）。 我认为男人应该关注这个话题。 小编还收集了CSS绘制三角形的实现代码（border方法）的相关资料。 以上信息，希望对男同胞们有所帮助。
1. 实现一个简单的三角形
利用CSS盒模型中的边框（border）实现如下图所示的三角形：
CSS实现简单三角形
实现原理：
我们先看看给元素添加边框时边框是什么样子的； 假设有以下代码：
div{宽度：50px;高度：50px;边框：2pxsolidorange;}
功效图：
边框的通常使用
这是我们平时使用边框时最常见的情况——我们往往只给边框一个很小的长度（通常是1-2px）； 但这样的日常使用很容易让你误解边框的生成方法，即元素的边框是由四个圆形边框组成的。
但这种情况并非如此。 事实上，元素的边框是由三角形组成的。 为了说明这个问题，我们可以减少边框的长度，并为每个边框边缘设置不同的颜色：
div{宽度：50px；高度：50px；边框：40pxsolid；边框颜色：orangeblueredgreen；}
功效图：
边框的生成方法
既然如此css3 三角边框，那么如果将元素的内容规范设置为0会发生什么情况呢？
div{宽度：0；高度：0；边框：40pxsolid；边框颜色：橙色蓝色红色绿色；}
功效图：
元素含量规格为0
我们会惊奇地发现，元素是由上、下、左、右4个三角形“拼接”而成的； 所以为了达到最终的效果，即保持底部三角形应该做的很简单，我们只需要将其他边框边缘的颜色设置为黄色或透明色即可：
div{宽度：0；高度：0；边框：40pxsolid；边框颜色：透明透明红色；}
最终疗效
Duang~最后简单的三角形就画出来了。 同样，如果想要得到其他边的三角形，只需将剩余边框边的颜色设置为黄色或透明即可。
然而，“隐藏”的上边框却一直占据着空间。 为了使绘制的三角形尺寸最小化，需要将上边框的长度设置为0（其他情况同理）：
div{宽度：0；高度：0；边框宽度：040px40px；边框样式：实心；边框颜色：透明透明红色；}
2. 实现一个带边框的三角形
带边框的三角形意味着在三角形上添加其他颜色的边框，就像为元素添加边框一样：
带边框的三角形
因为我们不能继续通过设置border来为已有的三角形设置边框（因为三角形本身就是借助border来实现的），所以我们必须另辟蹊径。 可以想到的最自然的方法之一是将当前三角形覆盖在更大的三角形之上。 上图所示的实现方式是将红色三角形放在较大的红色三角形之上。
为了达到这样的疗效，需要绝对定位：
首先定义外部红色三角形：
#blue{位置：相对；宽度：0；高度：0；边框宽度：040px40px；边框样式：实心；边框颜色：透明透明蓝色；}
其疗效为：
外层黑色三角形
之后需要定义白色三角形，因为蓝色三角形的定位需要参考白色三角形的位置，所以需要使用绝对定位的方式。 因此，也需要将红色三角形作为红色三角形的子元素。 一种可能的解决方案是在白色三角形内部定义一个附加标签来表示白色三角形，但保存标签的更好方法是使用伪元素：
#blue:after{内容:"";宽度:0;高度:0;位置:绝对;顶部:0px;左:0px;边框宽度:040px40px;边框样式:solid;边框颜色:transparenttransparentyellow;}
获得的疗效为：
定义白色三角形
需要高度注意此时定义的黑色三角形和白色三角形位置之间的偏转关系。 偏转将受到顶部、左侧（在本例中）和黑色三角形本身边框长度的影响。
可能会有这样的疑问：为什么黑色三角形会向左偏转一定距离呢？ 难道不应该完全重叠在红色三角形上吗？
黑色三角形与白色三角形完全重合
如果你有这样的疑问css3 三角边框，说明你对绝对定位还没有形成足够的认识。 绝对定位区域是以绝对定位的父元素的padding区域为基础，然后在此基础上使用top、left、right、bottom等一系列属性来约束子元素的位置那是绝对定位的。 在本例中，由于红色三角形是绝对定位的父元素，其内容规范为 0，因此内容区域是三角形的上顶点：
绝对定位区域
对于蓝色三角形，因为设置了left:0和top:0，所以白色三角形的所有内容（包括边框和边距）都会根据白色三角形的上顶点定位。 这时，left:0和top:0就可以分别看做两个“隔断墙”——即上隔断墙和左隔断墙上蓝色三角形的所有内容只能放在上隔断墙下面墙和左侧隔墙的右侧。 正方形面积。
因为蓝色三角形的内容区域也位于其顶点，并且在其上设置了左右各40px的边框，所以白色三角形的内容区域会向右倾斜40px从而产生之前的效果。
想想将白色三角形的位置设置为left:0和bottom:0的定位效果（如右图）
黑色三角形设置为 left:0 和 Bottom:0
搞清楚绝对定位后，只需要对原来的代码稍加改动，让红色三角形的顶点和白色三角形的顶点重合即可。 同时，蓝色三角形的尺寸要适当减小（与相似三角形成比例减小）：
#blue:after{内容:"";位置:绝对;顶部:0px;左:-38px;边框宽度:038px38px;边框样式:solid;边框颜色:transparenttransparentyellow;}
得到：
黑色三角形与白色三角形的顶点重合
前面的代码中，故意删除了之前设置的width:0和height:0，因为子元素有position:absolute设置，这会导致元素规格缩小到元素内容的规格，而没有显式设置length 和 height 因为 content 设置为 content: ""，所以子元素的规格默认为 0。 因此，设置 width:0 和 height:0 是多余的。
最后一步是使用top将红色三角形向上连接到合适的位置：
#blue:after{内容:"";位置:绝对;顶部:1px;左:-38px;边框宽度:038px38px;边框样式:solid;边框颜色:transparenttransparentyellow;}
得到最终效果：
最终疗效
学会了如何绘制带边框的三角形后，实现类似下面的三角形箭头就没问题了：
三角箭头
实现代码：
#blue:after{内容:"";位置:绝对;顶部:2px;左:-38px;边框宽度:038px38px;边框样式:solid;边框颜色:透明透明#fff;}
3.从其他角度画三角形
绘制具有其他角度的三角形，例如：
直角三角形
或者：
左右三角形
甚至更简单，尽管它们都是基于之前绘制的三角形。 如果要勾勒出直角三角形，则将左边框设置为0； 如果要勾勒出左直角三角形，则将右边框设置为0（其他情况同理）。
以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您支持爱迪网。
发表评论