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. 在线配置热加载配置 go-kratos.dev 监听key

    paladin https://v1.go-kratos.dev/#/config-paladin example Service(在线配置热加载配置) # service.go type Servi ...

  2. linux：nginx

    nginx介绍 一个高性能的http服务器/反向代理服务器及电子邮件代理服务器 nginx 大致有三大功能(静态web服务器.反向代理.负载均衡) nginx一般同时做为静态web服务器和反向代理服务 ...

  3. Linux内核poll/select机制简析

    0 I/O多路复用机制 I/O多路复用 (I/O multiplexing),提供了同时监测若干个文件描述符是否可以执行IO操作的能力. select/poll/epoll 函数都提供了这样的机制,能 ...

  4. Session (简介、、相关方法、流程解析、登录验证)

    Session简介 Session的由来 Cookie虽然在一定程度上解决了"保持状态"的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能 ...

  5. 面向对象编程(封装、封装的意义、封装与扩展性、@property)

    1.封装之如何实现属性的隐藏 封装: __x=1 # 把数据属性隐藏 (如何实现隐藏) 类定义阶段 __开头发生了变形 __x --> _A__x特点: 1.在类外部无法直接:obj.__Att ...

  6. TCP IP SOCKET 笔记

    网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...

  7. Arduino字符串笔记

    Arduino里的字符串笔记 1 字符串转数字 String To Int /* 使用String.toInt()将字符串转为数字示例 */ String inString = "" ...

  8. docker（2）CentOS 7安装docker环境

    前言 前面一篇学了mac安装docker,这篇来学习在linux上安装docker 环境准备 Docker支持以下的CentOS版本,目前,CentOS 仅发行版本中的内核支持 Docker. Doc ...

  9. Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) C. Remove Adjacent（字符串，贪心，枚举）

    题意: 给你一个由小写字母组成的字符串,若串中两个相邻元素字典序中也相邻,移除较大字母,问最多能移除多少个字母. 思路: 从大到小依次枚举. Tips: 注意下标的处理. 以小消大: #include ...

  10. hdu5726 GCD(gcd +二分+rmq)

    Problem Description Give you a sequence of N(N≤100,000) integers : a1,...,an(0<ai≤1000,000,000). ...