如何使用CSS绘制带边框的空心三角形箭头？

之前用::before搭配border实现失败，基本都是踩了伪元素渲染规则、定位基准、单伪元素逻辑复杂这几个坑，用拆分双伪元素的方案实现最稳定，不需要额外新增DOM节点。

实现代码 #

基础HTML结构 #

<div class="connector-container">
  <div class="square-block"></div>
  <div class="circle-block"></div>
</div>

核心CSS样式 #

/* 父容器设置定位基准，排布两个图形 */
.connector-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 70px; /* 控制方块和圆形的间距，即箭头总长度 */
  padding: 2rem;
}

/* 方块样式 */
.square-block {
  width: 90px;
  height: 90px;
  background-color: #2b6cb0;
  position: relative;
}

/* 圆形样式 */
.circle-block {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #2f855a;
  position: relative;
}

/* 方块的after伪元素画连接直线 */
.square-block::after {
  content: ""; /* 伪元素必填属性，缺省则不渲染 */
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 70px; /* 和父容器gap值保持一致 */
  height: 4px;
  background-color: #1a202c;
}

/* 圆形的before伪元素画箭头三角 */
.circle-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  /* border法画三角：上下透明边框撑高度，右侧实色边框做箭头面 */
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 14px solid #1a202c;
}

常见失效原因排查 #

• 伪元素漏写content: ""属性：这是伪元素不渲染的最常见原因，哪怕内容为空也必须声明
• 定位基准缺失：设置了position: absolute的伪元素，会向上查找最近的非static定位的祖先元素做定位基准，如果方块/圆形没加position: relative，箭头会偏移到页面角落
• 单伪元素同时实现直线+箭头逻辑复杂：如果只用一个伪元素，需要配合多重背景、渐变或者额外的边框属性拼接，尺寸计算很容易出错，拆分两个伪元素分别实现直线和三角的逻辑更简单易维护

样式自定义方法 #

• 调整直线粗细、颜色：修改.square-block::after的height和background-color属性
• 调整箭头大小：修改.circle-block::before三个border的宽度值
• 调整图形间距：同步修改父容器gap值和.square-block::after的width值即可

内容的提问来源于stack exchange，提问作者David Gheeorghe