[分享]css划三角形

CSS划三角形是Web开发中比较常见的需求之一。在网页制作中，我们经常需要使用三角形来作为箭头、提示框、页面装饰等元素，而CSS可以轻松地实现这一需求。代码示例： .triangle { width:...

CSS划三角形是Web开发中比较常见的需求之一。在网页制作中，我们经常需要使用三角形来作为箭头、提示框、页面装饰等元素，而CSS可以轻松地实现这一需求。

代码示例：
.triangle {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
} 

上述代码中，我们使用了border属性来实现三角形，其中width和height为0，border-width设置为实际需要的大小，border-color需要将所需的边框颜色放在最后一个参数。

上述代码可以理解为一个上边框为透明，右边框为透明，下边框为#333实际大小的div。因此形成了一个三角形。

此外，我们还可以使用伪元素before和after来实现三角形效果：

代码示例：
.triangle2 {
  position: relative;
}

.triangle2:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

.triangle2:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
} 

在上述代码中，我们使用了一对before和after元素来分别实现上下两个三角形，通过绝对定位放置在需要的位置。其实质和上面的单元素实现类似，只是增加了元素个数，使得代码更加灵活。

从以上两种实现方式可以看出，CSS可以实现简单、优雅的三角形效果。这种方法不仅方便实现，而且不需要使用额外的图片资源，兼容性也较好，被广泛应用于Web开发中。