[分享]css写border三角形

CSS中经常会用到border，使用border可以给网页中的元素设置边框样式。下面我们将介绍如何使用CSS写出漂亮的border三角形。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
} 

上面的代码就是一个基本的border三角形的实现方式。其中，我们将元素的宽度和高度都设置为0，让它只有边框。border-top和border-bottom设置为50px的透明边框，这样我们就得到了两条对角线；border-right则设置为100px的红色边框，就得到了最终的三角形，如下图所示：

如果我们要将三角形朝左侧倾斜，只需要改变border-right为border-left即可。代码如下：

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: none;
  border-left: 100px solid blue;
  border-bottom: 50px solid transparent;
} 

效果如下图所示：

如果我们想让三角形有多个颜色，比如上下两边是红色，左右两边是蓝色。就需要使用渐变效果linear-gradient，代码如下：

.triangle-gradient {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
  border-left: 50px solid transparent;
  background: linear-gradient(to left, blue 50%, transparent 50%);
} 

这里，我们使用border-top和border-bottom设置红色边框，border-right和border-left设置透明边框。然后，我们在元素的背景中使用linear-gradient，将左半部分设置为蓝色，右半部分设置为透明，就得到了最终的效果，如下图所示：

总的来说，使用CSS实现border三角形还是比较简单的。只需要使用边框样式和渐变效果来进行调整，就能够得到各种不同形状和颜色的三角形。大家可以试着自己写一下，体验一下CSS的强大和灵活。