CSS中单向箭头的写法

目录

怎么写单向箭头

---

单向箭头的写法

有很多同学在初学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控制直角的两个边长；

          3. transform控制在2D上的旋转、平移、缩放，这里用到了skewY (定义沿着 Y 轴的 2D 倾斜转换)，可以把直角倾斜为锐角，用translateY在Y轴上平移让两个箭头位于同一水平线上。