目录
怎么写单向箭头
单向箭头的写法
有很多同学在初学CSS 写作业的时候可能会遇到有些文字前面有单向箭头，比如这个美图网站
还有下面升序 降序的箭头，下面我就用代码的方式来跟大家讲一下如何制作
美图 ：
span { border: solid #f5275f; display: inline-block; border-width: 0 1px 1px 0; padding: 1px 10px 3px 10px; transform: skewX(45deg); vertical-align: middle; }讯享网
升序降序的：
讯享网<p><i class="left-down"></i> <i class="right-up"></i></p>
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; } 原理：1. 用border-width画一个直角，改变参数可以获得四个方向上的直角；
2. padding控制直角的两个边长；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/32289.html