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. html新特性笔记

    HTML5知识总结 l  文档类型声明:<!DOCTYPE HTML> l  新绘制元素: Canvas:标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API ...

  2. 如何创建一个验证请求的API框架

    ​开发一款成功软件的关键是良好的架构设计.优秀的设计不仅允许开发人员轻松地编写新功能,而且还能丝滑的适应各种变化. 好的设计应该关注应用程序的核心,即领域. 不幸的是,这很容易将领域与不属于这一层的职 ...

  3. (07)-Python3之--函数

    1.定义 函数:实现了某一特定功能.    可以重复使用. 例如: len()   功能:获取长度.input()   功能: 控制台输入print()   功能:输出 语法: def 函数名称(参数 ...

  4. 为什么MySQL索引使用B+树

    为什么MySQL索引使用B+树 聚簇索引与非聚簇索引 不同的存储引擎,数据文件和索引文件位置是不同的,但是都是在磁盘上而不是内存上,根据索引文件.数据文件是否放在一起而有了分类: 聚簇索引:数据文件和 ...

  5. Hmailserver搭建邮箱服务器

    由于阿里云,谷歌云,腾讯云等服务器都不开放25端口和pop3端口,想要使用邮箱服务得购买他们的企业邮箱,但是对于个人而言比较贵. 所以我们需要利用家庭宽带申请公网IP. 首先打电话给运营商客服,申请动 ...

  6. Linux命令——netcat

    简介 netcat的简写是nc,被设计为一个简单.可靠的网络工具,主要作用如下: 1 实现任意TCP/UDP端口的侦听,nc可以作为server以TCP或UDP方式侦听指定端口 2 端口的扫描,nc可 ...

  7. PAT甲级1056Mice and Rice

    目录 题目介绍 题解 解题思路 代码 参考链接 题目介绍 题目链接 https://pintia.cn/problem-sets/994805342720868352/problems/9948054 ...

  8. 在Ubuntu安装Docker

    1.查看Linux内核依赖 kernel version >= 3.8 查看代码: uname -a | awk '{split($3, arr, "-"); print a ...

  9. 【wp】HWS计划2021硬件安全冬令营线上选拔赛

    逆向手在夹缝中艰难求生系列. 这篇真的存粹是做题笔记了,对内核驱动啥的不太懂,pwn也不会,能做出来的题都是硬逆出来的( childre最后死活没整出来,后来看大佬的wp才知道对子进程有修改(.)呜呜 ...

  10. Spark使用Java、Scala 读取mysql、json、csv数据以及写入操作

    Spark使用Java读取mysql数据和保存数据到mysql 一.pom.xml 二.spark代码 2.1 Java方式 2.2 Scala方式 三.写入数据到mysql中 四.DataFrame ...