纯CSS制作网页图标
三角形
<div class="box"></div>
<style>
.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;
}
</style>
平行四边形图标
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
background-color: red;
transform: skew(-25deg);
}
</style>
暂停按钮
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -26px;
}
</style>
暂停按钮的实现原理就是边框用border,里面的正方形用outline。因为outline有一个offset属性可以用来设置偏移量,并且是按照比例来的。
其实如果再将outline-offset的值设置小一点,一个加好就出来了
加号
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -35px;
}
</style>
如果再将其旋转,就变成了一个关闭按钮
关闭按钮
<div class="box"></div>
<style>
.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);
}
汉堡按钮
<div class="box"></div>
<style>
.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;
}
</style>
汉堡按钮2:
<div class="box"></div>
<style>
.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;
}
</style>
单选按钮
因为box-shadow会按比例缩放,因此将第一个值设置为白色,然后将第二个值设置的比第一个值大就可以了
<div class="box"></div>
<style>
.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;
}
</style>
圆圈中带个十字
<div class="box"></div>
<style>
.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;
}
</style>
田型图标
<div class="box"></div>
<style>
.box {
width:;
margin: 100px auto;
border: 3px solid red;
outline: 6px dotted red;
outline-offset: 6px;
}
</style>
下载箭头
使用border制作三角形,使用box-shadow制作正方形,主要用了偏移
<div class="box"></div>
<style>
.box {
width:;
margin: 100px auto;
color: red;
border: 8px solid transparent;
border-top: 8px solid red;
box-shadow: 0 -12px 0 -4px;
}
</style>
书签
实现这种效果的原理就是讲三角形设置成背景色,这样空心的三角形就出现了
<div class="box"></div>
<style>
.box {
width:;
height: 8px;
background-color:orange;
border: 8px solid transparent;
border-bottom: 8px solid #fff;
}
</style>
两个半圆图标
这个比较简单,就是通过渐变函数来实现,然后来个圆角边框
<div class="box"></div>
<style>
.box {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: linear-gradient(to right,#ccc 50%,#000 50%);
}
</style>
禁用图标
外圈利用圆角边框,里面的竖线用渐变来做,然后再用旋转属性即可
<div class="box"></div>
<style>
.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);
}
</style>
左右箭头图标
既然能做出一个三角形,那么就可以做出两个三角形。
<div class="box"></div>
<style>
.box {
width:;
height:;
margin: 100px auto;
border: 10px solid transparent;
border-left: 10px solid red;
-webkit-box-reflect: left 5px;
box-reflect:left 5px;
}
</style>
需要在Chrome浏览器中打开,因为其他浏览器或许不支持
鹰嘴图标
<div class="box"></div>
<style>
.box {
width: 32px;
margin: 100px auto;
border-top: 50px solid transparent;
border-right: 22px solid #096;
border-bottom-right-radius: 100%;;
}
</style>
纯CSS制作网页图标的更多相关文章
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
随机推荐
- 【django之form和认证系统小练习】
作业要求: 作业 : 基于form表单和form组件作业注册页面 基于认证系统实现登录,注册,注销,修改密码 """ Django settings for day20_ ...
- R︱mlr包帮你挑选最适合数据的机器学习模型(分类、回归)+机器学习python和R互查手册
一.R语言的mlr packages install.packages("mlr")之后就可以看到R里面有哪些机器学习算法.在哪个包里面. a<-listLearners() ...
- VS2005 添加onTimer定时器
SetTimer(1,300,NULL); void CchangeDisplayDlg::OnTimer(UINT_PTR nIDEvent) { // TODO: 在此添加消息处理程序代码和/或调 ...
- Android常见Crash原因总结(二)
Android平台程序崩溃大家都应该遇到过,force close和ANR应该是大家遇到较多的. 这里把Android平台程序崩溃的各种类型做一个简述和原因列举. 1.ANR(可见ANR): 发生场景 ...
- 图像处理------快速均值模糊(Box Blur)
图像模糊的本质, 从数字信号处理的角度看,图像模糊就要压制高频信号保留低频信号, 压制高频的信号的一个可选择的方法就是卷积滤波.选择一个低频滤波器,对图像上的 每个像素实现低频滤波,这样整体效果就是一 ...
- Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'content' a
1.错误描述 org.hibernate.exception.DataException: could not execute statement at org.hibernate.exception ...
- RHCE6.4 rpm 安装gcc
先将gcc的iso里的Packages拷贝到根目录下,方便以后使用,再找gcc的rpm包安装: 网上说有以下依赖,需要按照一下顺序安装: rpm -ivh cpp*****.rpm rpm -ivh ...
- STM32f4 ARM Bootloader
参考资料: 基于ARM 的嵌入式系统Bootloader 启动流程分析 Bootloader 详解 ( 代码环境 | ARM 启动流程 | uboot 工作流程 | 架构设计) Android系统启动 ...
- iBatis基础知识
iBatis简介: 特点:结构性好,小巧,容易上手 搭建环境: 1.创建java 项目 2.导入(3个)jar包:ibatis-2.3.0.667.jar,mysql驱动包,Junit测试包 3.配置 ...
- JavaScript之中级教程关键
Date() setTime()getTime()toUpperCase() toLowerCase() charAt() 返回指定的字符,返回的字符长度为1的字符串. indexOf('需要检索的字 ...