pure CSS3 实现三角形icon的方法

border: color+transparent

transform : rotate() /rotateZ()

? 使用 实体字符”◆“实现三角形效果

demo:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		*{

			-webkit-overflow-scrolling: touch;

		}

		.container{

			 margin-left: 300px;

			 margin-top: 200px;

		}

		.box{

			width:60px;

		    height:60px;

		    /*border: 1px solid #0f0;*/

		    float: left;

		    position: relative;

		}

		.b1{

			background: #e66161;

		}

		.b1 .circle{

			width: 10px;

			height: 10px;

			background: #fff;

			position: absolute;

			border-radius: 5px;

			top: 25px;

			left: 60px;

			z-index: 9999;

		}

		.triangle{

		    width:0px;

		    height:0px;

		    border-width:30px;

		    border-style:solid;

		    /*border-color:#e66161 #f3bb5b #94e24f #85bfda;*/

		    border-color:transparent transparent transparent #e66161;

		    /*can not using border-radius, head is not the real triangle*/

		}

	</style>

</head>

<body>

	<div>

		<h1>-webkit-overflow-scrolling: touch;</h1>

	</div>

	<div class="container">

		<div class="box b1">

			<div class="circle">

				<!--  -->

			</div>

		</div>

		<div class="box">

			<div class="triangle">

				<!--  -->

			</div>

		</div>

	</div>

</body>

</html>

label Icon + font

1

demo-update:

1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            -webkit-overflow-scrolling: touch;

        }

        .container{

             margin-left: 300px;

             margin-top: 200px;

             background-color: #000;

             width: auto;

             height: auto;

             overflow: hidden;

        }

        .box{

            width:60px;

            height:60px;

            /*border: 1px solid #0f0;*/

            float: left;

            position: relative;

            border-radius: 7px 0 0 7px;

        }

        .b1{

            background: #2CCD76;

        }

        .b1 .circle{

            width: 10px;

            height: 10px;

            background: #fff;

            position: absolute;

            border-radius: 5px;

            top: 25px;

            left: 60px;

            z-index: 9999;

        }

        .b1 span{

            color: #fff;

            font-size: 1.5em;

            display: inline-block;

            /*text-align: center;*/

            /*justify-content: center;*/

            /*border: 1px solid red;*/

            margin: 25% 8.3%;

        }

        .triangle{

            width:0px;

            height:0px;

            border-width:30px;

            border-style:solid;

            /*border-color:#e66161 #f3bb5b #94e24f #85bfda;*/

            border-color:transparent transparent transparent #2CCD76;

            /*can not using border-radius, head is not the real triangle*/

        }

    </style>

    <style>

        .r-container{

             margin-left: 300px;

             margin-top: 10px;

             background-color: #000;

             width: auto;

             height: auto;

             overflow: hidden;

        }

        .r-box{

            width:60px;

            height:60px;

            /*border: 1px solid #0f0;*/

            float: left;

            position: relative;

            border-radius: 10px 7px 7px 10px;

            background: #2CCD76;

            z-index: 9999;

        }

        .r-box span{

            color: #fff;

            font-size: 1.5em;

            display: inline-block;

            /*text-align: center;*/

            /*justify-content: center;*/

            /*border: 1px solid red;*/

            margin: 25% 8.3%;

        }

        .rr{

            width:42.5px;

            height:42.5px;

            /*border: 1px solid #0f0;*/

            float: left;

            left: 35px;

            top: 9px;

            position: absolute;

            background: #2CCD76;

            transform: rotateZ(45deg);

            /* rotate center ???*/

            z-index: -1;

            border-radius: 3px 5px;

        }

        .rr .rc{

            width: 10px;

            height: 10px;

            background: #fff;

            position: absolute;

            border-radius: 5px;

            top: 10px;

            left: 22px;

        }

    </style>

</head>

<body>

    <div>

        <h1>-webkit-overflow-scrolling: touch;</h1>

    </div>

    <div class="container">

        <div class="box b1">

            <span>DEMO</span>

            <div class="circle">

                <!--  -->

            </div>

        </div>

        <div class="box">

            <div class="triangle">

                <!--  -->

            </div>

        </div>

    </div>

    <hr>

    <div class="r-container">

        <div class="r-box">

            <span>DEMO</span>

            <div class="rr">

                <div class="rc">

                    <!--  -->

                </div>

            </div>

        </div>

    </div>

</body>

</html>

1

1

1

1

1

1

1

1

pure CSS3 实现三角形icon的方法的更多相关文章

  1. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  2. CSS3中新颖的布局方法

    本人已经很久没用 bootstrap 什么的了,而现阶段一点卑微的梦想就是自己做框架,毕竟也才入门不久. 所以在寻找布局的共通性/稳定性及拓展性时,会发觉 CSS3 的这三种方法比栅栏布局要有趣得多. ...

  3. css3 input placeholder颜色修改方法

    css3 input placeholder颜色修改方法<pre> input::-webkit-input-placeholder { /* placeholder颜色 */ color ...

  4. css3自定义上传图片输入框的方法

    css3自定义上传图片输入框的方法 代码如下<pre> <form class="form1"> <img src="/kelatoupia ...

  5. js 获取和设置css3 属性值的实现方法

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...

  6. RETINA显示屏下ICON优化方法

    便于理解,先来了解几个名词: dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率.一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分 ...

  7. xcode 5.0 以上去掉icon高亮方法&iOS5白图标问题

    之前的建议方法是把在xxx.info.plist文件中把 icon already includes gloss and bevel effects 设置YES 在Xcode5下,反复实现不成功,今天 ...

  8. 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  9. CSS3画三角形原理

    1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...

随机推荐

  1. ESPNet/ESPNetV2：空洞卷积金字塔 | 轻量级网络

    ESPNet系列的核心在于空洞卷积金字塔,每层具有不同的dilation rate,在参数量不增加的情况下,能够融合多尺度特征,相对于深度可分离卷积,深度可分离空洞卷积金字塔性价比更高.另外,HFF的 ...

  2. ValueError: the environment variable is longer than 32767 characters On Windows, an environment variable string ("name=value" string) is limited to 32,767 characters

    https://github.com/python/cpython/blob/aa1b8a168d8b8dc1dfc426364b7b664501302958/Lib/test/test_os.py ...

  3. 架构风格 vs. 架构模式 vs. 设计模式(译)

    4.架构风格 vs. 架构模式 vs. 设计模式(译) - 简书 https://www.jianshu.com/p/d8dce27f279f

  4. 如何在Redis中实现事务

    如何在Redis中实现事务 - 微店技术团队 - SegmentFault 思否 https://segmentfault.com/a/1190000007429197

  5. （010）每日SQL学习：按字母顺序排列字符串

    需求:一串字母'ADFGH',需要按照顺序来显示:A D F G H 第一步:先把字符串拆分 with test as( select 'ADFGH' as a from dual ) select ...

  6. （Oracle）已有数据表建立表分区—在线重定义

    今天在做数据抽取的时候,发现有一张业务表数据量达到了5000W,所以就想将此表改为分区表.分区表的有点如下: 1.改善查询性能:对分区对象的查询可以仅搜索自己关心的分区,提高检索速度.2.增强可用性: ...

  7. vuex有哪几种属性

    有五种,分别是 State. Getter.Mutation .Action. Modulestate => 基本数据(数据源存放地)getters => 从基本数据派生出来的数据muta ...

  8. 利用powershell隐藏执行后门

    运行后门时,有些后门不能中断.双击运行这种后门会产生一个黑框. 一条命令就能使其在后台执行 命令解释: start-process启动一个进程 -windowstyle窗口样式 hidden隐藏

  9. boss导出简历css

    $('body').css('background-color', '#fff')$('.keywords').hide()$('#wrap').html($('.resume-box').css(' ...

  10. CentOS7.X安装英伟达显卡采坑之路

    1.系统信息 操作系统版本:CentOS7.X 显卡版本:英伟达 Tesla P100 其他软件包安装信息: CUDA 9.0 CUDNN 7.4.2.24 lightgbm 2.2.X Boost ...