-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<style>
-
i {
-
border: solid black;
-
border-width: 0 1px 1px 0;
-
display: inline-block;
-
padding: 3px;
-
}
-
.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 Arrows</h2>
-
<p>Right arrow: <i class="right"></i></p>
-
<p>Left arrow: <i class="left"></i></p>
-
<p>Up arrow: <i class="up"></i></p>
-
<p>Down arrow: <i class="down"></i></p>
-
</body>
-
</html>
纯css实现扁平化空心箭头
最新推荐文章于 2024-05-13 09:53:40 发布
本文介绍了如何在HTML中使用CSS创建四种基本的方向箭头符号，分别是Rightarrow（右箭头）、Leftarrow（左箭头）、Uparrow（上箭头）和Downarrow（下箭头），通过CSS类名控制箭头的旋转方向。
扫一扫
5415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
