<html>

<head>

    <title>css图标</title>

    <meta charset="utf-8">

</head>

<style>

    .box{

        width: 0;

        height: 0;

        border-top: 20px solid transparent;

        border-bottom: 20px solid transparent;

        border-left: 20px solid transparent;

        border-right: 20px solid red;

    }

    .box1{

        width: 50px;

        height: 50px;

        margin: 100px auto;

        background-color: red;

        transform: skew(-25deg);

    }

    .box2{

        width: 50px;

        height: 50px;

        margin: 100px auto;

        color: #000;

        border: 1px solid;

        border-radius: 50%;

        outline: 10px solid;

        outline-offset: -26px;

    }

    .box3{

        width: 50px;

        height: 50px;

        margin: 100px auto;

        color: #000;

        border: 1px solid;

        border-radius: 50%;

        outline: 10px solid;

        outline-offset: -35px;

    }

    .box4{

        width: 50px;

        height: 50px;

        margin: 100px auto;

        color: #000;

        border: 1px solid;

        border-radius: 50%;

        outline: 10px solid;

        outline-offset: -35px;

        transform: rotate(45deg);

    }

    .box5{

        width: 50px;

        height: 0px;

        margin: 100px auto;

        box-shadow: 36px 10px 0 3px red,

        36px 0 0 3px red,

        36px 20px 0 3px red;

    }

    .box6{

        width: 0;

        margin: 100px auto;

        color: red;

        border: 8px solid transparent;

        border-top: 8px solid red;

        box-shadow: 0 -12px 0 -4px;

    }

    .box7{

        width: 0;

        height: 8px;

        background-color:orange;

        border: 8px solid transparent;

        border-bottom: 8px solid #fff;

    }

    .box8 {

        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>

<body>

<div class="box"></div>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>

<div class="box5"></div>

<div class="box6"></div>

<div class="box7"></div>

<div class="box8"></div>

</body>

</html>

纯css实现网络图标的更多相关文章

  1. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  2. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  3. 纯CSS制作网页图标

    三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...

  4. 纯CSS 实现关闭图标 icon

    本文介绍关闭 icon 的实现.具体如下 1.html部分 <span id="close"></span> 2.css部分 #close { displa ...

  5. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  7. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

  8. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

随机推荐

  1. Jasperreport5.6.9-----1

    Jasperreport5.6.0生成PDF 最近项目中需要生成报表,先是看了下itext,觉得还可以,但是如果数据字段多的话,不太灵活.所以后来看了下ireport,觉得还可以,下面简单说一下它们: ...

  2. 最近读jdk源码一些基础的总结（有待后续深入）

    第一点:java.lang 1.Object类,hashCode()方法,equals()方法,clone()方法,toString()方法,notify()和notifyAll()方法,wait() ...

  3. PTA 7-33 地下迷宫探索(深搜输出路径)

    地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的地下工事,如下图所示. 我们在回顾前辈们艰苦卓绝的战争生活的同时,真心钦佩他们的聪明才智. ...

  4. [codeforces_597B] Restaurant(贪心)

    题目链接 http://codeforces.com/problemset/problem/597/B 题意 输入:区间数目n.及n个区间的起止(左闭右闭). 输出:最多不重叠的区间有多少个. 思路 ...

  5. 用django实现一个资产管理的系统

    整个页面的效果如下图所示 1.登陆注册页面 2.注册的页面 3.登陆页面 4.所有设备 5.正常设备页面 6.退库设备页面 7.丢失设备页面 8.导出设备的页面,仅仅在所有设备页面才支持导出按钮 9. ...

  6. Linux磁盘挂载详述

    1.查看硬盘信息及分区 一般使用”fdisk -l”命令可以列出系统中当前连接的硬盘,设备和分区信息.新硬盘没有分区信息,则只显示硬盘大小信息. [root@localhost home]# fdis ...

  7. how2j网站前端项目——天猫前端（第一次）学习笔记3

    开始学习分类页面! 站长介绍说,这个项目一共有17个分类页面,每个分类页面的风格都是相似的:由分类图片. 查询.各种排序方式,产品列表.内容很多,拆成3部分学习:1.排序和价格 2.产品列表 3.交互 ...

  8. idea工程中web.xml报错Servlet should have a mapping

    搭建ssm工程过程中web.xml报错:Servlet should have a mapping ....但是mapping已经配置好了...如下图: 搜索无果,后来发现是工程的web.xml位置配 ...

  9. 非线性优化（高翔slam---第六讲 ）

    1.线性最小二乘问题 2.非线性最小二乘问题 因为它非线性,所以df/dx有时候不好求,那么可以采用迭代法(有极值的话,那么它收敛,一步步逼近): 这样求导问题就变成了递归逼近问题,那么增量△xk如何 ...

  10. 9.29 h5日记

    1.CSS中哪些属性可以继承? font系列 text系列 color line-height 2.border-radius的值 值的顺序是左上 右上 右下 左下 则 border-radius:5 ...