CSS实现三角形图标原理解析
CSS实现三角形图标原理解析:
border边框语法:
border 四条边框设置
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用
基本用法:
// 为引用 class="border-four" 的盒子对象设置1px像素红色实线边框
.border-four { border: 1px solid #ff0000; };
// 同理,单独给左边框设置1px像素红色实线边框
.border-left { border-left: 1px solid #ff0000; };
// 同理,单独给右边框设置1px像素红色实线边框
.border-right { border-right: 1px solid #ff0000; };
// 同理,单独给上边框设置1px像素红色实线边框
.border-top { border-top: 1px solid #ff0000; };
// 同理,单独给底边框设置1px像素红色实线边框
.border-bottom { border-bottom: 1px solid #ff0000; };
推荐常用边框:
// 实线边框:solid
.solid { border: 1px solid #ff0000; }
// 虚线边框:dashed
.dashed { border: 1px dashed #ff0000; }
进入正题:
正常块元素设置四条不同颜色边框效果:为了效果明显,所有边框宽度均为50px;
上图 html 和 css 代码如下:
<div class="test-border">我是居中内容</div>
.test-border {
border-top: 50px solid #ff0000;
border-bottom: 50px solid #00a000;
border-left: 50px solid #ff7f50;
border-right: 50px solid #436eee;
text-align: center;
}
请各位记住四条边边框位置范围,这很重要。当去掉内容,效果显示会是什么样的?
再附上 html 代码,css代码同上没有任何变化
<div class="test-border"></div>
效果如下:
因为此处div是块级元素,所以 会撑满一行。接下来我们将宽和高设置为0,看看效果又是什么样?附上 html 和css 代码以及效果图:
<div class="test-border"></div>
.test-border {
width: 0;
height: 0;
border-top: 50px solid #ff0000;
border-bottom: 50px solid #00a000;
border-left: 50px solid #ff7f50;
border-right: 50px solid #436eee;
text-align: center;
}
看到上面效果图,距离我们实现三角形四个方向带箭头已经不远了,
如果我们将上图的下边框颜色设置为透明,即 border-right: 50px solid transparent;
效果如下:
如果我们我们去掉 border-bottom ,效果相信大家都能猜到,CSS 和 如下图所示:
.test-border {
width: 0;
height: 0;
border-top: 50px solid #ff0000;
border-bottom: 50px solid #00a000;
border-left: 50px solid #ff7f50;
}
备注:由于此时宽和高都设置为0,所以text-align: center 是多余的,去掉。
没错,就是这样的,和上面的透明的效果对比一下。
是不是离我们的三角箭头又更近一步了?此时有的人或许会想,我把上边框和下边框一起去掉不就是向右的三角箭头了?错,当我们去掉上边框和下边框,此时盒子模型的高度是为0,无法将左边框撑高,我们将开不到任何东西,所以,不能将上边框和下边框宽度设置为0或者去掉。
我们去掉下边框试一试。CSS 和 效果如下所示:
.test-border {
width: 0;
height: 0;
border-top: 50px solid #ff0000;
border-left: 50px solid #ff7f50;
}
没错,效果就是这样,变成正方形了,现在的效果是不是我们的三角箭头原来越远了?那我们继续没有去掉border-bottom上来展开思考,
怎么样才能达到我们想要的效果呢?既不能去掉上边框也不能去掉下边框,我们可不可以隐藏上边框和下边框呢?大家都知道css颜色有一个属性值 transparent
如果我们将上边框和下边框的颜色设置成透明会怎么样?自己在慢慢想象一下,效果如下:
.test-border {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #ff7f50;
}
接下来给出其余三个三角箭头 CSS 代码和效果图。
箭头向左:
.test-border {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #436eee;
}
箭头向下:
.test-border {
width: 0;
height: 0;
border-top: 50px solid #ff0000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
箭头向上:
.test-border {
width: 0;
height: 0;
border-bottom: 50px solid #00a000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
原文地址:http://www.cnblogs.com/jack-chan/p/5024129.html
CSS实现三角形图标原理解析的更多相关文章
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS实现三角形图标的原理《转载》
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- CSS实现三角形图标的原理!!!!今天总算弄懂了。
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- CSS中包含块原理解析
CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- css实现三角形图标
css边框和相框构造是一样的,看下面这代css代码: <div style="border-color: red blue black green;border-style: soli ...
- CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...
- CSS创造三角形的原理
其实就是利用了div各方向border的接驳点产生的斜线的特点,知道原理后就不觉得有多不可思议了.. .triangle_up { height: 0px; width: 0px; border-bo ...
随机推荐
- 九度OJ 1075:斐波那契数列 (数字特性)
时间限制:5 秒 内存限制:32 兆 特殊判题:否 提交:3121 解决:1806 题目描述: 编写一个求斐波那契数列的递归函数,输入n值,使用该递归函数,输出如样例输出的斐波那契数列. 输入: 一个 ...
- 九度OJ 1052:找x (基础题)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7335 解决:3801 题目描述: 输入一个数n,然后输入n个数值各不相同,再输入一个值x,输出这个值在这个数组中的下标(从0开始,若不在数 ...
- servlet 复习笔记
总的说来Servlet的配置包括Servlet的名字,Servlet的类(如果是JSP,就指定JSP文件),初始化参数,启动装入的优先级,servlet的映射,运行的安全设置. 下面举例介绍其配置: ...
- /etc/init.d/nginx
#! /bin/sh PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin DESC="nginx daemon ...
- 让我们再谈谈 iOS 安全
前言 安全方面的话题总是聊不完的.这不,国外一家有名的专门攻击别人的安全公司 Hacking Team 自己被 Hack 了,结果有 400 多 G 的攻击资料泄漏出来,包括一些 0-day 的漏洞. ...
- BZOJ 2142 礼物 数论
这道题是求组合数终极版. C(n,m) mod P n>=1e9 m>=1e9 P>=1e9且为合数且piqi<=1e5 拓展lucas定理. 实际上就是一点数论小知识的应用. ...
- 无法远程连接阿里云的Mysql
问题描述:昨天使用阿里云安装了Mysql,无法远程连接,排除端口号错误.防火墙.Mysql权限问题后,最后发现是阿里云安全组规则限制问题: 解决方式: 1.访问阿里云控制台,实例-->管理 2. ...
- Ubuntu 17.4下如何安装和配置flash player
Ubuntu Linux系统下没有自带的flash player,要自己手动安装.下面post出简单的安装过程. 首先打开终端,输入命令:sudo apt-get install flashplugi ...
- python列表切片
Python中符合序列的有序序列都支持切片(slice),例如列表,字符串,元组. 格式:[start:end:step] start:起始索引,从0开始,-1表示结束 end:结束索引 step:步 ...
- python基础-发邮件smtp
先来想下发送邮件需要填写什么,还需要有什么条件1.与邮件服务器建立连接,用户名和密码2.发邮件:发件人,收件人,主题,内容,附件3.发送 使用第三方邮箱发送邮件 #! /usr/bin/env pyt ...