[分享]Css下箭头怎么打出来

在网页设计与开发中，经常会出现箭头这样的符号。而使用 HTML 中的实体字符表示箭头，其显示效果是很不理想的。此时我们可以使用 CSS 来实现箭头的效果。在 CSS 中，利用 border 属性可以完...

在网页设计与开发中，经常会出现箭头这样的符号。而使用 HTML 中的实体字符表示箭头，其显示效果是很不理想的。此时我们可以使用 CSS 来实现箭头的效果。

在 CSS 中，利用 border 属性可以完成一些三角形箭头的效果，如下：

.arrow-up {
  border-width: 0 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}
.arrow-right {
  border-width: 5px 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent transparent #000;
}
.arrow-down {
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}
.arrow-left {
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent #000 transparent transparent;
} 

如上代码可以实现一个简单的箭头，但是有时候我们需要更多的箭头样式，于是我们可以使用 CSS 的 transform 来实现斜角箭头或者曲头箭头。如下：

.slant-arrow {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #000;
  transform: rotate(45deg);
}
.curve-arrow {
  width: 20px;
  height: 20px;
  border: 5px solid transparent;
  border-top-color: #000;
  border-right-color: #000;
  border-radius: 50%;
  transform: rotate(45deg);
} 

如上代码可以实现斜角箭头和曲头箭头的效果。如果需要更多的箭头样式，我们可以根据自己的需求进行调整。