1.概述

本文基于个人在工作中遇到的实际问题，针对两个不同的场景使用css技术实现了三角形。

• 场景1：不带边框的三角形；
• 场景2：带边框的三角形；

2.不带边框的三角形

这种实现思路实际上是利用了边框来填充盒子。

可以看到第一个原始的方块，当为四个border设置不同的颜色，分别产生了四个三角形，那么需要箭头朝向哪个方向的三角形，就将其余的三个边框设置成transparent就可以。

但是这个方法有个问题，就是这样的三角形无法带上不同颜色的边框。

3.带边框的三角形

这种实现思路实际上是利用了背景渐变+border的方法实现的，首先利用渐变画出三角形，再利用boder添加边框，而底边的那条边框，也可以利用渐变来做，只要给1%将这条边画出来就行，从视觉上看起来没区别。