如何在in中创建虚线箭头

<div class="arrow-container">
  <!-- 箭头元素 -->
</div>

.arrow-container {
  position: relative;
  width: 200px; /* 根据需要设置容器的宽度 */
  height: 100px; /* 根据需要设置容器的高度 */
}

.arrow-container::before,
.arrow-container::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100px; /* 根据需要设置箭头的长度 */
  height: 2px; /* 根据需要设置箭头的粗细 */
  background-color: #000; /* 根据需要设置箭头的颜色 */
}

.arrow-container::before {
  left: 0;
  transform: translateY(-50%);
  border-bottom: 1px dashed #000; /* 设置虚线样式 */
}

.arrow-container::after {
  right: 0;
  transform: translateY(-50%) rotate(180deg);
  border-bottom: 1px dashed #000; /* 设置虚线样式 */
}

<div class="arrow-container"></div>