HTML+CSS 实现带横线的半箭头 ⥯ ⇌
结合网上的一些箭头的实现代码，自己捣鼓了片刻，记录一下。
应用场景
网站前端点击排序按钮，用两个半箭头来表示升降序。
代码
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Allentitle>
head>
<style>i{border: solid black;display: inline-block;}.left-down {border-width: 0 1px 1px 0;padding: 10px 1px 10px 5px;transform: skewY(45deg) translateY(3px);}.right-up{border-width: 1px 0 0 1px;padding: 10px 5px 10px 1px;transform:skewY(45deg) translateY(8px);margin-left: 5px;}
style>
<body><p><i class="left-down">i> <i class="right-up">i>p>body>
html>
代码实现了 ⥯ 箭头：1. 用border-width画一个直角，改变参数可以获得四个方向上的直角；2. padding控制直角的两个边长；3. transform控制在2D上的旋转、平移、缩放，这里用到了skewY (定义沿着 Y 轴的 2D 倾斜转换)，可以把直角倾斜为锐角，用translateY在Y轴上平移让两个箭头位于同一水平线上。
效果图
宽度、高度、颜色等可自定义
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！