html直⾓三⾓形怎么实现,CSS绘制三⾓形的实现代码（border
法）
1. 实现⼀个简单的三⾓形
使⽤CSS盒模型中的border(边框)即可实现如下所⽰的三⾓形：
CSS实现简单三⾓形
实现原理：
⾸先来看在为元素添加border时，border的样⼦；假设有如下代码：
div {
width: 50px;
height: 50px;
border: 2px solid orange;
}
效果图：
border的⼀般使⽤
这是我们平常使⽤border最普遍的情况——往往只给border⼀个较⼩的宽度(通常为1-2px)；然⽽这样的⽇常⽤法就会容易让⼤家对border的形成⽅式产⽣ 误解 ，即认为元素的border是由四个矩形边框拼接⽽成。
然⽽事实并不是这样。实际上，元素的border是由 三⾓形 组合⽽成，为了说明这个问题，我们可以增⼤border的宽度，并为各border边设置不同的颜⾊：
div {
width: 50px;
height: 50px;
border: 40px solid;
border-color: orange blue red green;
}
效果图：
border的形成⽅式
既然如此，那么更进⼀步，把元素的内容尺⼨设置为0会发⽣什么情况呢？
div {
width: 0;
height: 0;
border: 40px solid;
border-color: orange blue red green;
}
效果图：
元素内容尺⼨为0
我们将惊奇地发现，此时元素由上下左右4个三⾓形“拼接”⽽成；那么，为了实现最终的效果，即保留最下⽅的三⾓形，还应该怎么做？很简单，我们只需要把其它border边的颜⾊设置为 ⽩⾊ 或 透明⾊ ：
div {
width: 0;
height: 0;
border: 40px solid;
border-color: transparent transparent red;
}
最终效果
div border属性
Duang~ 最终的简单三⾓形就绘制出来了。同理，如果想要得到其它边上的三⾓形，只需要将剩余的border边颜⾊设置为⽩⾊或透明⾊即可。
不过，被“隐藏”的上border仍然占据着空间，要想使得绘制出的三⾓形尺⼨最⼩化，还需要将上border的宽度设置为0(其它情况同理)：
div {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}
2. 实现带边框的三⾓形
带边框的三⾓形是指为三⾓形添加其它颜⾊的边框，如同为元素添加border⼀样：
带边框的三⾓形
由于不能继续通过为已有三⾓形设置border的⽅法来为其设置边框(因为三⾓形本⾝就是利⽤border实现的)，所以只好另想办法。⽽能想到的⼀个最⾃然的⽅法就是 三⾓形叠放 ，即把当前三⾓形叠放在更⼤的三⾓形上⽅，上图所⽰的实现⽅法就是把黄⾊三⾓形放在了尺⼨更⼤的蓝⾊三⾓形上。
为了实现这样的效果，需要利⽤ 绝对定位 ⽅法：
⾸先定义出外⾯的蓝⾊三⾓形：
#blue {
position:relative;
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent blue;
}
效果为：
外围蓝⾊三⾓形
随后需要定义黄⾊三⾓形，由于黄⾊三⾓形的定位需要参考蓝⾊三⾓形的位置，所以需要⽤到绝对定位⽅法。为此还需要将黄⾊三⾓形作为蓝⾊三⾓形的⼦元素。⼀个可⾏的办法是在蓝⾊三⾓形内部定义⼀个额外的标签以表⽰黄⾊三⾓形，但为了节约标签起见，更好的办法是使⽤ 伪元素 :
#blue:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0px;
left: 0px;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到的效果为：
定义黄⾊三⾓形
需要特别注意此时定义出的黄⾊三⾓形与蓝⾊三⾓形之间位置的偏移关系，该偏移将受到 top 、 left (本例中)以及黄⾊三⾓形本⾝border 宽度的共同影响。
可能会有这样的疑问：为什么黄⾊三⾓形会向左偏移⼀段距离呢，按道理不应该完全重合在蓝⾊三⾓形上吗，就像这样下⾯这样？
黄⾊三⾓形与蓝⾊三⾓形完全重合
如果有这样的疑问，说明还没有对绝对定位产⽣⾜够的认识。绝对定位的区域是基于 绝对定位⽗元素的 padding 区域，然后在此基础上运⽤ top 、 left 、 right 、 bottom 等⼀系列属性来约束绝对定位⼦元素的位置。在本例中，由于蓝⾊三⾓形作为绝对定位⽗元素，其内容的尺⼨为0，则内容区域就是该三⾓形的上顶点：
绝对定位区域
对于黄⾊三⾓形，由于设置了 left: 0 和 top: 0 ，所以黄⾊三⾓形的 所有内容 (包括border、margin)将根据蓝⾊三⾓形的上顶点进⾏定位。可以把此时 left: 0 和 top: 0 分别看作是两⾯“隔墙”——即上隔墙和左隔墙，黄⾊三⾓形的所有内容只能在上隔墙的下⽅和左隔墙的右⽅区域。
由于黄⾊三⾓形的内容区域也位于其顶点处，且对其设置了左右各40px的border，所以黄⾊三⾓形的内容区域将向右偏移40px，从⽽形成了之前的效果。
想想看将黄⾊三⾓形的位置设置为 left: 0 和 bottom: 0 ，会得到怎样的定位效果？(下图所⽰)
黄⾊三⾓形设置为left: 0和bottom: 0
搞懂了绝对定位后，只需要在原代码上稍作修改就可以将黄⾊三⾓形的顶点与蓝⾊三⾓形顶点相重合，同时还应该适当缩⼩黄⾊三⾓形的尺⼨(按相似三⾓形等⽐例缩⼩)：
#blue:after {
content: "";
position: absolute;
top: 0px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到：
黄⾊三⾓形与蓝⾊三⾓形顶点重合
在上⾯的代码中，特意删除了之前对 width: 0 和 height: 0 的设置，因为⼦元素具有 position:absolute 设置，这会使得元素尺⼨在不显式设置宽度和⾼度的情况下，收缩到元素内容的尺⼨，由于内容设置的是 content: "" ，所以⼦元素的尺⼨默认也就是0了。故设置 width: 0 和 height: 0 就变得多余了。
最后⼀步就是利⽤ top 将黄⾊三⾓形向下移动⾄合适的位置：
#blue:after {
content: "";
position: absolute;
top: 1px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。