利用css画三角箭头图标

利用css画三角箭头图标方式



单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg)

 div {
      width: 50px;
      height: 50px;
      border-left: 2px solid black; 
      border-top: 2px solid black;
      transform: rotate(-45deg);    
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框、排序、返回到上一页、导航条,分页都会用到三角形或者箭头...
    一俢阅读 2,176评论 0 21
  • 在日常开发中,经常会用到各种形状的三角形,我们可以通过图标来实现自己先要的效果,但如何用样式快速写出一个适合自己的...
    木子方是个小太阳阅读 761评论 1 1
  • web网页设计和开发的过程中,经常会接触到箭头,用来指引用户的交互行为,多用于展开子菜单,比如下面的网页截图中: ...
    乘着风阅读 5,638评论 4 13
  • 一、CSS中的属性和取值 1.文本类属性: text-align属性:此标签内容的水平对齐方式,内容须为具体文字/...
    刘远舟阅读 527评论 0 1
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,334评论 2 66