css 箭头的实现

最新推荐文章于 2024-06-22 09:56:05 发布

Candy_home

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量1k

点赞数

分类专栏： css学习+less学习文章标签： css less 箭头 arrow

本文链接：https://blog.csdn.net/Candy_home/article/details/37697057

版权

css学习+less学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 实现箭头符号

CSS代码：

.pr_risk-bar_mark--target__prev,
.pr_risk-bar_mark--target__next{
  position: absolute;
  top: 50%;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.pr_risk-bar_mark--target__next{
  border-left: 15px solid white;
  right: -25px;
}

.pr_risk-bar_mark--target__prev{
  border-right: 15px solid white;
  left: -25px;
}

HTML代码：

<div class="pr_risk-bar_mark--target__prev"></div>
<span class="pr-risk-graph-bar__mark-text pr_yourTarget" data-ng-bind-template="{{target|number:2}}"></span>
<div class="pr_risk-bar_mark--target__next"></div>