<!DOCTYPE html>
<html>
<head>
<style>
i {
  /* 用border值来控制箭头粗细 */
  border: 3px solid black;
  /* 上、右、下、左  四个边框的宽度 */
  border-width: 0px 1px 1px 0px;

  display: inline-block;
  /* padding值控制箭头大小 */
  padding: 5px;
}
 
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
 
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
 
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
 
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
 
<h2>用CSS写上下左右箭头,样式可以自己调整</h2>
 
<p>右箭头</i>: <i class="right"></i></p>
<p>左箭头: <i class="left"></i></p>
<p>上箭头: <i class="up"></i></p>
<p>下箭头: <i class="down"></i></p>
 
</body>
</html>

直接复制粘贴跑一下就明白了。

# css # html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟