[分享]css中如何改变小三角样式

CSS中有许多方法可以改变小三角的样式，其中最常用的是通过伪元素:before和:after设置。

.arrow{
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #000 transparent;
}
.arrow:before{
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #fff transparent;
} 

上述代码中，.arrow定义了一个三角形元素，通过设置border-style: solid属性实现了三角形的效果，同时通过border-color设置了底边颜色为黑色，其余边框颜色为透明。通过:before伪元素，再次定义了一个三角形元素，通过设置top和left属性让其重叠在原三角形上，同时设置颜色为白色实现了带边框的三角形样式。

还有一种改变小三角样式的方法是使用CSS3的transform属性，将一个正方形旋转45度即可实现三角形效果，具体代码如下：

.arrow{
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 1px solid #000;
  border-left: none;
  border-top: none;
} 

上述代码中，.arrow定义了一个宽高为10px的正方形元素，通过transform: rotate(45deg)将其旋转45度，由于border属性只设置了右边和底部的边框，因此显示为一个三角形。边框颜色可以通过border-color属性进行设置。