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. Mac下IDEA激活Jrebel

    第一步:在idea中下载jrebel,过程省略 第二步:配置反向代理工具 Windows 版:http://blog.lanyus.com/archives/317.html MAC 版: 安装hom ...

  2. 关于BI测试

    BI测试: BI是从数据接入.数据准备.数据分析.数据可视化到数bai据分发应用的一系列过程,目的是为了辅助企业高效决策.而报表虽然最终也实现了数据可视化,但是对于数据分析的维度.深度.颗粒度.实时性 ...

  3. Centos 7 Rabbitmq 安装并开机启动

    准备工作 安装wget yum install -y wget rabbitmq安装需要依赖erlang,erlang安装参考:https://www.cnblogs.com/swyy/p/11582 ...

  4. apache httpclient 4 范例

    下面是一个通过apache httpclient 4 实现http/https的普通访问和BasicAuth认证访问的例子.依赖的第三方库为: 下面是具体实现: package test; impor ...

  5. 关于MinGW64的调试

    学习的机房电脑能老了,都是xp系统.安装DEV C++后发现为MinGW64. 而我常用编译调试命令为: g++ -g *.cpp -o a gdb a 编译出的程序无法调试. 一直以为,根本就无法调 ...

  6. Prometheus 初探和配置（安装测试）

    本文大纲: • Prometheus 官⽹下载• Prometheus 开始安装• Prometheus 启动运⾏• Prometheus 基本配置⽂件讲解• 安装第⼀个exporter => ...

  7. Spark Dataset DataFrame空值null,NaN判断和处理

    Spark Dataset DataFrame空值null,NaN判断和处理 import org.apache.spark.sql.SparkSession import org.apache.sp ...

  8. AJAX传值中文乱码

    AJAX传值时采用的是UTF-8编码格式,客户端中文字符传输到服务器端时,如果服务器编码格式或者所采用的MVC框架的编码格式不是UTF-8,则很可能会出现中文乱码.解决办法如下: 客户端用js函数en ...

  9. js创建javaMap

    /** * Simple Map * var m = new Map(); * m.put('key','value'); * var v_otherMap = v_m.toMapString();* ...

  10. UML——交互图（序列图+协作图）

    交互图(interaction diagram):是协作图=通信图UML2.0以后的叫法=合作图=(Collaboration /Communication Diagram)以及序列图=顺序图=时序图 ...