纯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

时间: 2024-10-28 15:33:21

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关文章

分享一个纯css制作的动画化,在网页(手机)加载等的时候可以引用!

CSS代码如下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.5s

纯CSS制作的三角箭头

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS制作的三角箭头丨kiddy<

纯CSS制作三角(转)

原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/8967012 以前写过一篇纯CSS制作带三角的边框,那篇文章是用HTML特殊字符来制作三角的,今天介绍下,如何用 border 来制作三角. html 代码如下: <div class="arrow-up"></div> <div class="arrow-

纯CSS制作自适应分页条-分享------彭记(019)

纯css制作自适应分页条 效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi

纯CSS制作二级导航

原文:纯CSS制作二级导航 一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一个竖向的ul. 1 <ul id="nav_ul"> 2 <li> 3 <a href="#">首页</a> 4 <ul class="nav_ul_ul"> 5

如何使用纯CSS制作特效导航条?

先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的过程中遇到的一个类似的小问题.其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊.所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? 定义需求 我们定义一下简单的规则,要求如下: <ul> <li>不可思议的CSS</li> <li>

如何使用纯 CSS 制作四子连珠游戏

序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较复杂,而本人水平有限,翻译必有不恰当之处,望指正. 原文:How the Roman Empire Made Pure CSS Connect 4 Possible 翻译:nzbin 实验是学习新技巧.思考新想法.并突破自身极限的有趣的方式."纯 CSS"演示很早就有了,但是随着浏览器和

追求极致--纯css制作三角、圆形按钮,兼容ie6

参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

纯CSS制作加&lt;div&gt;制作动画版哆啦A梦

纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可以查看一下,每个线条及椭圆都是纯CSS代码生成. 首先分析结构 根据原图,将哆啦A梦分为几个结构,然后再分解其他部位. 画出各部分的形状和颜色,然后使用绝对定位(absolute)和相对定位(relative)改变其位置. 各种带弧度形状,使用border-radius属性实现. 倾斜角度,使用transf