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实现三角形图标原理解析的更多相关文章

  1. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  2. CSS实现三角形图标的原理《转载》

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...

  3. CSS实现三角形图标的原理!!!!今天总算弄懂了。

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...

  4. CSS中包含块原理解析

    CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...

  5. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  6. CSS实现元素居中原理解析

    在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...

  7. css实现三角形图标

    css边框和相框构造是一样的,看下面这代css代码: <div style="border-color: red blue black green;border-style: soli ...

  8. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  9. CSS创造三角形的原理

    其实就是利用了div各方向border的接驳点产生的斜线的特点,知道原理后就不觉得有多不可思议了.. .triangle_up { height: 0px; width: 0px; border-bo ...

随机推荐

  1. 九度OJ 1164:旋转矩阵 (矩阵运算)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3188 解决:1245 题目描述: 任意输入两个9阶以下矩阵,要求判断第二个是否是第一个的旋转矩阵,如果是,输出旋转角度(0.90.180. ...

  2. SAP-Function_01

    TH_POPUP –在特定用户屏幕上显示一个系统消息 1 . 函数WS_UPLOAD     功能﹕将TXT文件转换成SAP中的内表定义的数据表格文件    注意﹕1 函数将按参数 data_tab  ...

  3. Kaggle系列1:手把手教你用tensorflow建立卷积神经网络实现猫狗图像分类

    去年研一的时候想做kaggle上的一道题目:猫狗分类,但是苦于对卷积神经网络一直没有很好的认识,现在把这篇文章的内容补上去.(部分代码参考网上的,我改变了卷积神经网络的网络结构,其实主要部分我加了一层 ...

  4. DataGridView自定义RichTextBox列

    https://www.codeproject.com/Articles/31823/RichTextBox-Cell-in-a-DataGridView-2 RichText是用图片显示的,当Sel ...

  5. 【转】如何让虚拟目录里面的webconfig不继承网站的设置

    [转]http://www.cnblogs.com/Sue_/articles/2037556.html 必須在上一层虚拟目录(如根目录)所在的Web.config加上 如:<location ...

  6. jQuery+CSS3动画相册特效

    在线演示 本地下载

  7. C++ 结构体多元素sort排序调用时的写法

    //总结一下,结构体数据排序的快速写法 //以后在遇到需要写的时候,不要迟疑快速写完 struct node { int u, v, w; }a[10000]; //假设该结构体有3个元素 //现在仅 ...

  8. Web性能测试中的几个概念【转】

    每秒查询率QPS:对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准,即每秒请求数,即最大谈吐能力. 并发数:并发数和QPS是不同的概念,一般说QPS会说多少并发用户下QPS,当QPS相同时, ...

  9. python- 常见算法 python内置模块

    1.冒泡排序 需求:请按照从小到大对列表 [13, 22, 6, 99, 11] 进行排序 原理:相邻两个值进行比较,将较大的值放在右侧,依次比较! li=[39,11,43,88,765,9]for ...

  10. 2015 年最热门的国人开发开源软件 TOP 50

    开源中国在 2015 年得到了快速的发展,单开源软件收藏量就接近 40000 款,其中不乏优质的国产开源项目.本文从软件的收藏.下载.访问等多角度挑选出了 2015 年最热门的国产开源软件前五十名,让 ...