css div箭头

箭头是网页设计中的常用元素，可以用来提示用户，增加交互体验。

使用CSS的伪元素:before和:after可以实现不同样式的箭头，而且还可以自定义箭头的大小、颜色和位置。

/* 默认的三角形箭头 */
.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid red;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

/* 带圆角的箭头 */
.arrow-rounded {
  width: 0;
  height: 0;
  border-top: 20px solid blue;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* 带阴影效果的箭头 */
.arrow-shadow {
  width: 0;
  height: 0;
  border-top: 30px solid green;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  Box-shadow: 0 0 10px rgba(0,0.5);
}

/* 带动画的箭头 */
.arrow-animation {
  position: relative;
  width: 0;
  height: 0;
  border-top: 40px solid purple;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  animation: arrow 2s infinite;
}

@keyframes arrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

以上是一些基础的箭头样式，根据实际需要可以进行自定义修改。

需要注意的是，在使用伪元素:before和:after时，需要设置content属性，否则箭头将无法显示。