css3写带边框箭头

CSS3是前端开发中最常用的技术之一，可以实现很多炫酷的效果，今天我们就来讲一讲如何用CSS3写带边框箭头。

.arrow {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-width: 2px 2px 0 2px;
  transform: rotate(45deg);
}

.arrow::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

.arrow::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  transform: rotate(45deg);
}

首先，我们为箭头设置了一个相对定位，然后设定宽高和边框，用border-width来单独设置上、右、下的宽度，左则与右相等。接着，通过transform来让箭头旋转45度。

然后，我们使用伪元素（::before和::after）来绘制箭头的两端，在其中设定边框样式和位置，也旋转了45度，这样就完成了箭头的绘制。

看到这里，我们就能发现，使用CSS3绘制带边框箭头非常简单，利用伪元素可以十分方便地实现不同形状和样式的箭头。大家可以尝试根据这个代码进行修改和实践，希望对大家的CSS3学习有所帮助。