html实现小图标,CSS实现小图标

关闭图标

.close {

position: relative;

display: inline-block;

width: 12px;

height: 12px;

}

.close:before {

content: '';

display: inline-block;

position: absolute;

top: 6px;

width: 12px;

border-top: 1px solid #ddd;

transform: rotate(45deg);

}

.close:after {

content: '';

display: inline-block;

position: absolute;

top: 6px;

width: 12px;

border-top: 1px solid #ddd;

transform: rotate(-45deg);

}

箭头图标

右箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-top: 1px solid #ddd;

border-right: 1px solid #ddd;

transform: rotate(45deg);

}

左箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-bottom: 1px solid #ddd;

border-left: 1px solid #ddd;

transform: rotate(45deg);

}

下箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-right: 1px solid #ddd;

border-bottom: 1px solid #ddd;

transform: rotate(45deg);

}

上箭头

.arrow {

display: inline-block;

width: 8px;

height: 8px;

border-top: 1px solid #ddd;

border-left: 1px solid #ddd;

transform: rotate(45deg);

}

三角形

下三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

top: 2px;

display: inline-block;

border-top: 4px solid #ddd;

border-right: 4px solid transparent;

border-bottom: 4px solid transparent;

border-left: 4px solid transparent;

}

上三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

bottom: 2px;

display: inline-block;

border-top: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 4px solid #ddd;

border-left: 4px solid transparent;

}

右三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

left: 2px;

display: inline-block;

border-top: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 4px solid transparent;

border-left: 4px solid #ddd;

}

左三角

.triangle {

position: relative;

display: inline-block;

width: 8px;

height: 8px;

overflow: hidden;

}

.triangle:after {

content: '';

position: absolute;

right: 2px;

display: inline-block;

border-top: 4px solid transparent;

border-right: 4px solid #ddd;

border-bottom: 4px solid transparent;

border-left: 4px solid transparent;

}

html实现小图标,CSS实现小图标相关推荐

第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
css补充（1）：css实现小三角，精灵图，字体图标
文章目录一.css实现小三角 1.1 三角形实现二.精灵图的使用三.字体图标一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...
怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...
微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...
微信小程序-如何使用icon图标
原微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...
微信小程序使用色彩字体图标（笔录）
微信小程序怎么使用色彩字体图标在阿里巴巴矢量图标库选择对应图标,添加到自己的项目中,下载到本地通过npm全局导入iconfont-tools工具,语法:npm i -g iconfont-tool ...

html实现小图标,CSS实现小图标

html实现小图标,CSS实现小图标相关推荐

最新文章

热门文章