css实现--三角形/箭头（上下左右）--详细原理

最新推荐文章于 2024-07-31 16:40:00 发布

Ajiia

最新推荐文章于 2024-07-31 16:40:00 发布

阅读量3.4k

点赞数 2

本文链接：https://blog.csdn.net/czj1049561601/article/details/113272094

版权

纯css实现上下左右箭头

**一直以为箭头知识引入的icon标签，直到实习才知道原来纯CSS是都可以实现的**

实现效果在这里插入代码片

  <style>
    #rightRow{
      height: 20px;
      width: 20px;
      border-right: 5px solid black;
      border-top: 5px solid black;
      padding:3px;
      transform: rotate(-135deg);
    }
  </style>
</head>
<body>
  <div id="rightRow"></div>
</body>

设置箭头粗细、颜色、大小代码

      border-right: 5px solid black;
      border-top: 5px solid black;
      //设置边框的大小值就可以得到不同粗细的箭头，5px->10px
      //设置padding属性可以将箭头变大变小，3px->5px

配合transform：rotate旋转元素，得到不同方向箭头

      transform: rotate(-135deg);
      //一个参数“角度”，单位deg，正数为顺时针旋转，上述逆时针旋转得到左箭头
      //deg=45,将会得到右箭头

扩展：transform具有其他属性

	   transform:scale(0.5);
	   transform:scale(0.5,2);
	   //参数表示缩放倍数：
	   		*一个参数：表示水平和垂直同时缩放该倍数
	   		*两个参数：第一个参数指定水平方向，第二个指定垂直方向		
	   transform:skew(30deg);
	   transform:skew(30deg,30deg);
	   //参数表示倾斜角度，单位deg，也是类似上述缩放（水平+垂直）