[分享]css中实现箭头大_向左向右

CSS中可以用伪元素实现箭头的效果，下面分别介绍如何实现向左、向右的箭头。

/* 向左的箭头 */
.arrow-left:before {
  content: ';
  display: inline-block;
  border-top: 10px solid transparent;
  border-right: 15px solid #000;
  border-bottom: 10px solid transparent;
}

/* 向右的箭头 */
.arrow-right:before {
  content: ';
  display: inline-block;
  border-top: 10px solid transparent;
  border-left: 15px solid #000;
  border-bottom: 10px solid transparent;
} 

以上代码中，通过:before伪元素创建了一个可见的形状，并设置了形状的三条边界的样式。

其中，向左的箭头使用了border-right样式，向右的箭头使用了border-left样式，两者的区别只在于其中一条边界的设置不同。

由于使用的是伪元素，所以箭头的样式可以直接在HTML中指定类名并使用，如下所示：

<div class="arrow-left"></div>
<div class="arrow-right"></div> 

以上代码将产生一向左、一向右的箭头。需要注意的是，箭头的方向可以通过修改前景色和背景色的设置进行更改。