css加号图标_纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)...
三角形
.box{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid red;
}
平行四边形图标
.box{
width: 50px;
height: 50px;
margin: 100px auto;
background-color: red;
transform: skew(-25deg);
}
暂停按钮
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -26px;
}
暂停按钮的实现原理就是边框用border,里面的正方形用outline。因为outline有一个offset属性可以用来设置偏移量,并且是按照比例来的。
其实如果再将outline-offset的值设置小一点,一个加好就出来了
加号
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -35px;
}
如果再将其旋转,就变成了一个关闭按钮
关闭按钮
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -35px;
transform: rotate(45deg);
}
汉堡按钮
.box{
width: 50px;
height: 0px;
margin: 100px auto;
box-shadow: 36px 10px 0 3px red,
36px 0 0 3px red,
36px 20px 0 3px red;
}
汉堡按钮2:
.box{
width: 30px;
height: 3px;
margin: 100px auto;
padding: 2px 0;
border-top: 3px solid red;
border-bottom: 3px solid red;
background-clip: content-box;
background-color: red;
}
单选按钮
因为box-shadow会按比例缩放,因此将第一个值设置为白色,然后将第二个值设置的比第一个值大就可以了
.box{
width: 30px;
height: 30px;
margin: 100px auto;
background-color: #000;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
}
圆圈中带个十字
.box {
width: 30px;
height: 30px;
margin: 100px auto;
background-color: #000;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
outline: 36px solid #fff;
outline-offset: -50px;
}
田型图标
.box {
width: 0;
margin: 100px auto;
border: 3px solid red;
outline: 6px dotted red;
outline-offset: 6px;
}
下载箭头
使用border制作三角形,使用box-shadow制作正方形,主要用了偏移
.box {
width: 0;
margin: 100px auto;
color: red;
border: 8px solid transparent;
border-top: 8px solid red;
box-shadow: 0 -12px 0 -4px;
}
书签
实现这种效果的原理就是讲三角形设置成背景色,这样空心的三角形就出现了
.box {
width: 0;
height: 8px;
background-color:orange;
border: 8px solid transparent;
border-bottom: 8px solid #fff;
}
两个半圆图标
这个比较简单,就是通过渐变函数来实现,然后来个圆角边框
.box {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: linear-gradient(to right,#ccc 50%,#000 50%);
}
禁用图标
外圈利用圆角边框,里面的竖线用渐变来做,然后再用旋转属性即可
.box {
width: 50px;
height: 50px;
border-radius: 50%;
border:2px solid #000;
background: linear-gradient(to right,#fff 45%,#000 45%,#000 45%,#fff 55%);
transform: rotate(40deg);
}
左右箭头图标
既然能做出一个三角形,那么就可以做出两个三角形。
.box {
width: 0;
height: 0;
margin: 100px auto;
border: 10px solid transparent;
border-left: 10px solid red;
-webkit-box-reflect: left 5px;
box-reflect:left 5px;
}
需要在Chrome浏览器中打开,因为其他浏览器或许不支持
鹰嘴图标
.box {
width: 32px;
margin: 100px auto;
border-top: 50px solid transparent;
border-right: 22px solid #096;
border-bottom-right-radius: 100%;;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
本文标题: 纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
本文地址: http://www.cppcns.com/web/css/85823.html
css加号图标_纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)...相关推荐
- 纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
三角形 <div class="box"></div> <style>.box{ width: 0;height: 0;border-top: ...
- css 科技 边框_纯css制作带三角的边框(附效果图)
首先附上效果图: 以上的效果完全是用 css 来实现的,那么是怎么实现的呢? 我们知道 html 中有一些特殊的字符,具体的请点击 HTML特殊字符大全. 通过特殊字符,利用 css 中的 margi ...
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- [css] 能不能使用纯css使你的浏览器卡死?怎么实现?
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css 圆形背景icon_纯CSS3制作精美的圆形扁平风格图标
这是一组使用纯CSS3制作的精美的扁平风格的圆形图标.这些圆形图标都是使用CSS的伪元素来制作,是一套以家居为主题的图标,包括门窗,邮箱,浴室,台灯书柜等等10个图标. 制作方法 HTML结构 图标的 ...
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- css写√的图标_用CSS来制作图标
想知道如何利用CSS来制作图标吗?并且只使用一个标签的情况下,不能使用伪元素哦! 在利用CSS制作图标时,经常用到border边框,所以,先看看边框的相关知识. 1.藏在border中的不能说的秘密 ...
- Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
最新文章
- sql的四种连接 用mysql的语句写_170221、浅谈mysql的SQL的四种连接
- 成考高起专计算机统考试题,成考考试题型
- 社交营销产品设计思考
- OpenGL 平行粒子的实例
- python中os.system.获取输出信息_python中os.system()的返回值
- 【微信小程序】二维码跳转规则的前缀匹配是什么意思?
- 去IOE:去掉“IE”就Ok?
- 标准 I/O (带缓冲)
- 使用Spark/Java读取已开启Kerberos认证的HBase
- string 包含_一文搞懂String常见面试题,从基础到实战,到原理分析和源码解析...
- python开发的著名软件公司_软件开发公司_软件外包_项目外包平台基于Python开发一个全文检索系统...
- 阿里云服务器安装docker开发环境
- 科罗拉多州立大学计算机科学专业,科罗拉多州立大学有哪些专业_专业排名(QS世界排名)...
- 计算机等级考试攻略:四级网络工程师
- leetcode 经典动态规划DP算法题目(思路、方法、code)
- 在线支付接口详解、支付接口对接
- 互联网发展阶段的三阶段是什么?从门户到搜索,到移动互联网
- 基于MATLAB的隐函数与三维画图(附图与代码)
- Windows10分屏显示的3种方式
- 结构-02. 有理数加法(15)
热门文章
- 拍摄大像素如何组装电子云台和相机?手把手详细教程
- 【SCI征稿】IEEE旗下1区人工智能类SCI, 稳定检索22年,仅3个月左右录用~
- 一刀工具箱 - 今日热榜在线工具
- .eto 字体下载_使用Eto.Forms的具有开源.NET的跨平台GUI
- 计算机考证的证书是什么样的
- 春招秋招忆---斗鱼笔试
- godaddy域名续费优惠码,仅限.COM域名,可减免35%
- 人工智能成行业下一战场 中腾信实现催收领域智能质检
- 极简时间计算器:Time Calc Pro Mac
- 魔兽世界觅心者服务器维护,魔兽世界怀旧服8月27日中午维护公告 再次新增觅心者等6组PVP服务器...