css3实现小箭头各种图形效果

下面是关于“CSS3实现小箭头各种图形效果”的完整攻略：

1. 使用伪元素实现基本三角形

在CSS3中，我们可以通过使用伪元素的方法来快速地实现一个基本的三角形图形，代码如下：

.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid red;
}

以上代码中，我们为一个div元素添加了一个箭头的样式，其中width和height都为0，而使用的是3个border属性来实现四边形缺一角的效果，其中border-top和border-bottom设置成了透明，而border-right是实心的，便形成了一个向右的三角形。

2. 利用变形实现箭头变形

我们可以使用CSS3中的变形属性来实现箭头的扭曲效果，代码如下：

.arrow {
  height: 100px;
  width: 100px;
  background-color: #1e90ff;
  transform: rotate(45deg) skew(20deg);
  transform-origin: 0 0;
}

在以上代码中，我们设置了一个div元素为100px*100px的方形，背景颜色为蓝色。使用了transform属性设置了一个45度的旋转，以及向上倾斜20度的倾斜，造成箭头角度变形的效果。

3. 实现带有阴影和边框的箭头

在CSS3中，我们可以使用box-shadow属性来实现给箭头添加阴影的效果，以及使用border属性来设置边框，代码如下：

.arrow {
  height: 100px;
  width: 100px;
  background-color: #1e90ff;
  transform: rotate(45deg) skew(20deg);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

在以上代码中，我们除了添加了阴影和边框之外，其他的属性都与上面例子是相同的。

综上所述，我们可以利用伪元素、变形、阴影和边框等一系列CSS3属性来轻松实现各种漂亮的小箭头效果。