很多时候我们用到三角形这个效果：
我们可以用CSS3实现这个效果，怎去做呢？先阐述一下原理，我们定义一个空的div，设置这个div宽高为0，给这个div加上一个100px边框（这里是方便观察），得到的是一个正方形，颜色和定义边框的颜色相同，我们看到正方形其实是这个div边框。
<div id="d1"></div>style： #d1{ width:0; height:0; border:100px solid red; }实现效果：
那么这个元素现在对应的每个边框是什么样子的呢？我们来看：
对应代码：
<div id="d1"></div>style： #d1{ width:0; height:0; border-width:50px; border-style:solid; border-color:red blue black yellow;<br /> 上 右 下 左}
从上面这个我们发现，其实这个宽高为0的div的每一条边框都是一个三角形，实际操作中我们可能只需要一个三角形，那我们只要把不需要的border隐藏就可以了（用transparent属性）：
比如我要一个向下的三角形：
对应代码：
<div id="d1"></div>style： #d1{ width:0; height:0; border-width:50px; border-style:solid; border-color:red transparent transparent transparent;<br /> 上 右 下 左 }由此可以看出只是把对应border隐藏掉了，对应的border—color顺序为：
border-color:上 右 下 左; 每个颜色之间用空格隔开。
一个45度三角形：
对应代码：
<div id="d1"></div>style： #d1{ width:0; height:0; border-width:50px; border-style:solid; border-color:transparent transparent red red ;<br /> border-color:transparent transparent red blue ;}
同时我们可以调整对应border的宽度来调整三角形的形状：
对应代码：
我们这里修改了下方border的宽度
<div id="d1"></div>style： #d1{ width:0; height:0; border-width:50px; border-bottom-width:150px; border-style:solid; border-color:transparent transparent red transparent; border-color:blue green red black; } 同时我们也可以绘制一个圆角三角形：
对应代码：
这里为了看起来舒服些，加了透明度属性；
<div id="d1"></div>style： #d1{ width:0; height:0; border-width:50px; border-style:solid; border-top-left-radius: 15px; opacity: 0.569; border-color:red transparent transparent red; }关于三角形的制作基本就这些，很多时候配合伪类before、after使用会有意想不到的效果：
比如这个我自己编写的登录窗口的标签：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
