css左右移动的三角形

CSS中可以使用伪元素来创建三角形，同时通过控制三角形的位置实现左右移动。下面是一段实现左右移动的三角形的代码示例：

.btn {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
  left: -10px;
}

.btn:hover::before {
  left: 100%;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ccc transparent transparent;
}

上面的代码中，通过伪元素`::before`创建了一个三角形，并设置了其位置为按钮左侧。当鼠标移动到按钮上时，通过修改`left`属性使三角形向右移动，同时修改`border-width`和`border-color`属性实现三角形的方向和颜色变化。

通过这种方式，我们可以轻松创建漂亮而实用的按钮样式。注意代码中使用的各个CSS属性的含义和作用，这将对你理解和改进代码有很大帮助。