[分享]css三角形角度怎么画

CSS的三角形可以通过利用border属性来实现，根据使用的不同边框样式来创建不同方向的三角形。可以利用border宽度为0的特性来在需要的方向上添加边框，从而形成三角形。如下：.triangleup...

CSS的三角形可以通过利用border属性来实现，根据使用的不同边框样式来创建不同方向的三角形。可以利用border宽度为0的特性来在需要的方向上添加边框，从而形成三角形。如下：

.triangle-up {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #333;
} 

上述代码创建了一个朝上的等腰三角形，其中border-left和border-right属性设置为透明，border-bottom属性设置为需要的颜色。

如果想创建朝下的等腰三角形，只需要将bottom改为top即可：

.triangle-down {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #333;
} 

同理，如果要创建朝左或朝右的三角形，只需要改变对应的属性即可：

.triangle-left {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid #333;
  border-bottom: 30px solid transparent;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 30px solid #333;
  border-bottom: 30px solid transparent;
} 

以上代码分别创建了朝左和朝右的等腰三角形，在需要的方向上设置对应颜色的边框即可。