<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. Mac下环境变量设置错误，导致命令行命令不能使用后的解决办法

    1 在命令行中,临时设置环境变量 export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 2 各种命令就可以使用了.然后修复错误的环境变量配置 ...

  2. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

  3. TZOJ 3711 浪漫自习(最大流)

    描述 如今的校园谈恋爱已是习以为常,这不,去上自习也要成双成对的.现在假设某班里有N对情侣从同一寝室楼出发,到达同一个教室上自习.途中,她们可能会经过长廊.静溪等一系列的景点观光游览.但情侣们不希望在 ...

  4. 如何成功再次安装MYSQL

    以前安过,后来再安装就是停在启动项就是过不去,无响应 弄了两天,期待奇迹,网上各种教程试了个遍就是不行,大体就是删除INI,清理注册表,以下是新的发现:(转载) 如果你的电脑里装过MySQL,想再重新 ...

  5. 20165315 预备作业3 Linux安装及学习

    20165315 预备作业3 Linux安装及学习 一.在自己笔记本上安装Linux操作系统 因为对操作电脑的不熟悉,我在第一项任务上就花费了一定的时间,在安装过程有如下问题: 我的电脑是苹果公司的M ...

  6. ADT和DS

    Abstract Data Type vs. Data Structrue 抽象数据类型=数据模型+定义在该模型上的一组操作.  interface 数据结构=基于某种特定语言,实现ADT的一整套算法 ...

  7. Memcached使用与纠错（附代码和相关dll）

    今天没事研究一下,谁想到遇到了几个dll找不到,网上也不好找到,索性功夫不负有心人.贴出代码和相关的dll Memcached代码:(网上都是的,很多人都保存了这个代码) using Memcache ...

  8. .netcore webapi iis 虚拟目录下载apk文件

    首先贴上微软的文档:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files 参考网址:http://www.cnb ...

  9. BOM DOM jQuery

    . BOM . location相关 . location.href . location.href="http://www.sogo.com" . location.reload ...

  10. c# mac地址 和http://xx.xx.xx/ 正则表达式匹配

    Mac  :^([0-9a-fA-F]{2})(([/\s:][0-9a-fA-F]{2}){5})$ C# 书写方式 一下是允许mac中间间隔符是“:”或者“-”两种输入方式 并且我把上边的正则表达 ...