css--如何实现一个箭头

前端小趴菜的成长记录

于 2022-12-26 11:11:46 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_47434590/article/details/128441057

版权

css 专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

如何实现如图中的箭头?

 <div class="box">
    <span>城市:</span>
    <span>山西</span>
  </div>

.box {
	position: relative;
  }
.box::after {
	position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    top: 50%;
    left: 22%;
    border-left: 2px solid pink;
    border-bottom: 2px solid pink;
    transform: translateY(-60%) rotate(-45deg);
 }