[分享]css两个小三角

CSS可以通过伪元素的方式，非常简单地在页面上创建两个小三角形状。这种技术在设计中非常有用，可以让页面看起来更加生动和美观。.arrowtop { : relative; width: 0; heig...

CSS可以通过伪元素的方式，非常简单地在页面上创建两个小三角形状。这种技术在设计中非常有用，可以让页面看起来更加生动和美观。

.arrow-top {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-bottom {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
} 

这两个样式分别创建了上方和下方的小三角形。它们的实现原理比较简单：通过设置边框的大小和颜色，把一个矩形变成三角形。同时，通过设置边框的透明部分，使得三角形变得非常小，达到了可以控制大小的目的。

在实际应用中，我们可以通过修改样式的边框大小和颜色，来满足不同的需求。同时，这种技巧也可以应用到其他形状的创建中，如圆形、椭圆形等等。

总的来说，这两个小三角形是CSS中非常实用的技巧，它们可以让页面看起来更加生动和美观。如果你在设计网页中需要创建小箭头，不妨试试这个方法。