[分享]css做个小三角

CSS做小三角是一个很实用的技巧，可以用来美化页面，让页面看起来更加美观大方。以下是一些常用的方法：

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 20px solid #f00;
  border-bottom: 20px solid transparent;
} 

上面的代码可以实现一个向左的小三角，其中用到了 border-top 和 border-bottom 设置透明边框，有色边框则用到了 border-left。

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #f00;
} 

上面的代码可以实现一个向下的小三角，可以发现这次使用了透明的左右边框，以及有色的底边框。

当然，我们也可以通过伪元素来实现小三角。

.triangle {
  position: relative;
  width: 200px;
  height: 100px;
}
.triangle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #f00 transparent transparent transparent;
} 

通过在 triangle 上设置 position: relative ，并在其伪元素 ::after 上使用 position: absolute，我们可以利用此悬停在 triangle 内部的绝对定位创建一个向上的小三角。

以上是 CSS 实现小三角常用的方法，希望对大家有所帮助。