CSS自定义箭头轮廓实现教程

<div class="arrows">
  <i class="arrow down"></i>
</div>

.arrows {
  position: absolute; /* 示例定位，可根据实际布局调整 */
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35; /* 箭头的颜色 */
  border-width: 0 10px 10px 0; /* 定义箭头的形状 */
  display: inline-block;
  padding: 25px; /* 控制箭头大小 */
  position: relative; /* 关键：为伪元素提供定位上下文 */
}

.down {
  transform: rotate(45deg); /* 将形状旋转成向下箭头 */
  -webkit-transform: rotate(45deg); /* 兼容性前缀 */
}

.arrow {
  /* ... 现有样式 ... */
  box-shadow: 3px 3px 0px 2px black, inset -3px -3px 0px 2px black;
  /*
   * 第一个box-shadow: `3px 3px 0px 2px black`
   *   - 3px 3px: 阴影向右下偏移3px
   *   - 0px: 无模糊
   *   - 2px: 阴影扩散半径为2px
   *   - black: 阴影颜色
   *
   * 第二个box-shadow: `inset -3px -3px 0px 2px black`
   *   - inset: 内部阴影
   *   - -3px -3px: 阴影向左上偏移3px
   *   - 0px: 无模糊
   *   - 2px: 阴影扩散半径为2px
   *   - black: 阴影颜色
   *
   * 这两个阴影结合起来，围绕箭头的矩形区域形成一个双层、有偏移的轮廓效果。
   */
}

.arrow:before {
  content: ''; /* 伪元素必须有 content 属性 */
  width: 3px; /* 轮廓的宽度 */
  position: absolute;
  left: 0; /* 相对于 .arrow 左边缘定位 */
  bottom: -15px; /* 相对于 .arrow 底部边缘向上偏移 */
  z-index: 100; /* 确保在其他内容之上 */
  background: #000; /* 轮廓颜色 */
  height: 16px; /* 轮廓的高度 */
  /*
   * 这个伪元素通常用于补充箭头上半部分（或左侧）的轮廓。
   * 考虑到箭头的旋转和border-width，需要精确调整 left/bottom 值。
   */
}

.arrow:after {
  content: '';
  width: 16px; /* 轮廓的宽度 */
  position: absolute;
  right: -15px; /* 相对于 .arrow 右边缘向左偏移 */
  top: 0; /* 相对于 .arrow 顶部边缘定位 */
  z-index: 100;
  background: #000;
  height: 3px; /* 轮廓的高度 */
  /*
   * 这个伪元素通常用于补充箭头下半部分（或右侧）的轮廓。
   * 同样需要精确调整 right/top 值以匹配箭头的斜边。
   */
}

<div class="arrows">
  <i class="arrow down"></i>
</div>

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  position: relative; /* 确保伪元素定位正确 */
  box-shadow: 3px 3px 0px 2px black, inset -3px -3px 0px 2px black;
  /* 调整此处的 box-shadow 值以改变基础轮廓效果 */
}

.arrow:before {
  content: '';
  width: 3px;
  position: absolute;
  left: 0;
  bottom: -15px;
  z-index: 100;
  background: #000;
  height: 16px;
}

.arrow:after {
  content: '';
  width: 16px;
  position: absolute;
  right: -15px;
  top: 0;
  z-index: 100;
  background: #000;
  height: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}