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

纯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>
  1. 设置箭头粗细、颜色、大小代码
      border-right: 5px solid black;
      border-top: 5px solid black;
      //设置边框的大小值就可以得到不同粗细的箭头,5px->10px
      //设置padding属性可以将箭头变大变小,3px->5px
  1. 配合transform:rotate旋转元素,得到不同方向箭头
      transform: rotate(-135deg);
      //一个参数“角度”,单位deg,正数为顺时针旋转,上述逆时针旋转得到左箭头
      //deg=45,将会得到右箭头
  1. 扩展:transform具有其他属性
	   transform:scale(0.5);
	   transform:scale(0.5,2);
	   //参数表示缩放倍数:
	   		*一个参数:表示水平和垂直同时缩放该倍数
	   		*两个参数:第一个参数指定水平方向,第二个指定垂直方向		
	   transform:skew(30deg);
	   transform:skew(30deg,30deg);
	   //参数表示倾斜角度,单位deg,也是类似上述缩放(水平+垂直)
  1. 感谢观看!实现三角形见下篇
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页