纯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: 0;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: 0;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: 0;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: 0;height: 0;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>

 

转载于:https://www.cnblogs.com/QianBoy/p/8654425.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

您的MyFitnessPal帐户几乎肯定已被黑客入侵,请立即更改密码

If you’re one of the millions of the 150 million MyFitnessPal users, bad news: hackers have your email address, your user name, and your hashed password. 如果您是1.5亿MyFitnessPal用户中的数百万用户之一&#xff0c;那么这是个坏消息&#xff1a;黑客拥有您的电…

ios 启用 证书_如何在iOS 10中启用就寝提醒,轻柔的唤醒和睡眠跟踪

ios 启用 证书If you have trouble regularly getting a full night’s sleep, the new Bedtime feature in iOS 10 might just help. Set a wake up time and how many hours of sleep you need, and iOS offers bedtime reminders, more gentle alarms, and basic sleep trac…

struts OGNL表达式

OGNLContext对象有两部分构成 一部分是ROOT&#xff1a;可以放置任何对象作为ROOT 另外一部分Context&#xff1a;必须是Map形式&#xff08;键值对&#xff09; OGNL表达式操作 package cn.future.a_ognl;import java.util.HashMap; import java.util.Map;import ognl.Ognl; i…

制作一个用户头像选择器仿 WeGame

制作一个用户头像选择器仿 WeGameCropAvatar作者&#xff1a;WPFDevelopersOrg - 驚鏵原文链接&#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40&#xff1b;Visual Studio 2019;制作一个用户头像选择Canvas为父控件所实现&#xff0c;展示图片使…

网曝南方电网搞末位淘汰和裁员,给各下属单位强制规定辞退率和降岗降级率!...

电网作为垄断性国企&#xff0c;在人们心中一向是好单位的代名词&#xff0c;但最近却有网友曝光南方电网搞末位淘汰和裁员&#xff0c;给各单位下了辞退率和降岗降级率&#xff0c;每个单位都要开除一部分人&#xff0c;或者把一部分人岗级降下来。有南方电网员工马上跑出来辟…

二维数组中的查找

2019独角兽企业重金招聘Python工程师标准>>> 题目 在一个二维数组中&#xff0c;每一行中的数都按照从左到右、从上到下的递增顺序排列。要求输入一个整数&#xff0c;判断数组中是否存在该整数 实现代码 function find($matrix, $rows, $columns, $key) {//TODO 参…

蓝牙追踪_如何使用蓝牙追踪器跟踪您的东西

蓝牙追踪We’ve all done it: you misplace something important and you spend a lot of time (with a lot of stress) backtracking to locate it again. With Bluetooth tracking devices you can make the hunt a lot easier, less stressful, and even avoid losing the t…

vba发送邮件 签名_如何更改“从Windows 10的邮件发送”签名

vba发送邮件 签名The Windows 10 Mail app is a decent email client that allows you to add other email accounts in addition to your Microsoft accounts. You’ll notice, though, that any emails you write in the Mail app have a default signature. Windows 10 Mail…

JAVA_SE基础——24.面向对象的内存分析

黑马程序猿入学blog ... 接着上一章的代码&#xff1a; //车类 class Car{//事物的公共属性使用成员变量描写叙述。String name; //名字的属性 String color; //颜色属性 int wheel; //轮子数 //事物的公共行为使用函数描写叙述。 public void run(){ System.out.println(name&…

煮茶社区AVR开发板第二版[转]

原图:http://blossom.cnblogs.com/gallery/image/21891.html

[Kogel.Subscribe.Mssql]SQL Server增量订阅,数据库变更监听

此框架是SQL Server增量订阅&#xff0c;用来监听增删改数据库数据变更目前仅支持SQL Server&#xff0c;后续会支持MySQL和Oracle&#xff0c;Nuget上可以下载安装或者使用Nuget命令添加包dotnet add package Kogel.Subscribe.Mssql --version 0.0.0.1可以用来处理DB主从同步&…

MFC 单选按钮Radio使用注意

使用MFC Radio时遇到问题&#xff1a;数据交换时出现断言崩溃框 定位于&#xff1a; 解决方法&#xff1a; 1、按CTRLD&#xff0c;保证同一组内的radio的tab序号是连续的&#xff1b; 2、同一组内&#xff0c;设置 radio1的属性&#xff1a; group、tabstop、auto均为true&am…

C# 字符串操作:split、substring、Format

1.split split可以使用多个字符切割。 "test[12]"切割后是3个字符串&#xff0c;最后一个为空。 string testString "test[12]";string[] testData testString.Split([,]);int testLength testData.Length;Console.WriteLine(testLength.ToString());…

flac格式转换mp3格式_MP3,FLAC和其他音频格式之间有什么区别?

flac格式转换mp3格式Digital audio has been around a very long time so there’s bound to be a plethora of audio formats out there. Here are some of the more common ones, what differentiates them, and what to use them for. 数字音频已经存在了很长时间&#xff…

Kubernetes:Flomesh 服务网格与多集群通信

Kubernetes 成功普及了容器集群的概念。许多用户已经在多个集群中部署应用&#xff0c;组织需要运行多个 Kubernetes 集群可能来自以下原因&#xff08;并非详尽列表&#xff09;&#xff1a;• 位置• 延迟&#xff08;尽可能在靠近客户的地方运行应用程序&#xff09;• 管辖…

袁永福软件行业从业经历

简化版》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 袁永福简历 袁永福&#xff0c;男&#xff0c;1980年生于江西省九江市都昌县&#xff0c;2001年南京东南大学动力工程系本科毕业。毕业后一直从事计算机软件开发工作&…

小程序之地图导航

同学们平常使用地图的时候应该都有注意到&#xff0c;当我们在一个应用中选择一个地址&#xff0c;打开一个地图&#xff0c;往往会有两种显示方式&#xff0c;一个是显示当前自己的位置&#xff1b;一个是显示对方&#xff0c;也就是目的地的位置&#xff1b;如下图&#xff1…

PS2019摄影后期处理(一)

高高手之路笔记 一、学习方法 内外兼修&#xff1a;技术会淘汰、更新&#xff0c;自己内在也要提高。 二、照片格式、色彩空间 JPEG TIFF RAW sRGB&#xff1a;互联网相关图片&#xff0c;电子设备 三、照片风格 自己定义照片格式&#xff0c;直接后期效果 相机自带工具&a…

mdnsresponder_什么是mDNSResponder.exe / Bonjour,如何卸载或删除它?

mdnsresponderYou are no doubt reading this article because you’ve noticed the mDNSResponder.exe process running in Task Manager, you don’t remember installing it, and it doesn’t show up in the Add/Remove programs in Control Panel. So what is it, and how…

Windows 10下,如何使用PowerShell批量重启局域网电脑

PowerShell 在Windows 10中越来越受到微软重视&#xff0c;甚至被微软安排在开始按钮超级菜单中替换了一直以来默认的命令提示符(当然还可以换回去)&#xff0c;这和该工具越来越强大密不可分。这次就介绍一个“群重启”命令&#xff0c;可让局域网内的电脑集体重启。1、单机重…