[分享]css3怎么画三角行

CSS3是前端开发中需要掌握的技能之一，其中包括了很多有趣的特效，如今我们就来探讨一下CSS3怎么画三角形。/ 一个向下的三角形 / .triangle { width: 0; height: 0; ...

CSS3是前端开发中需要掌握的技能之一，其中包括了很多有趣的特效，如今我们就来探讨一下CSS3怎么画三角形。

/* 一个向下的三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边为50像素的空 */
  border-right: 50px solid transparent; /* 右边为50像素的空 */
  border-top: 50px solid red; /* 上面为50像素的红色区域 */
}

/* 一个向右的三角形 */
.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* 上面为50像素的空 */
  border-bottom: 50px solid transparent; /* 下面为50像素的空 */
  border-left: 50px solid blue; /* 左边为50像素的蓝色区域 */
}

/* 一个向左的三角形 */
.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* 上面为50像素的空 */
  border-bottom: 50px solid transparent; /* 下面为50像素的空 */
  border-right: 50px solid green; /* 右边为50像素的绿色区域 */
}

/* 一个向上的三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边为50像素的空 */
  border-right: 50px solid transparent; /* 右边为50像素的空 */
  border-bottom: 50px solid yellow; /* 下面为50像素的黄色区域 */
} 

这个代码是用border属性来实现的，我们设置三边为空，一边设为颜色，这样就形成了一个三角形。我们可以改变border的顺序和宽度来方便我们画不同方向的三角形。

总结一下：CSS3画三角形是一件很简单的事情，只需要设置一个方向为空，其他三条边加上各自的颜色就可以了。