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. [URAL-1517][求两个字符串的最长公共子串]

    Freedom of Choice URAL - 1517 Background Before Albanian people could bear with the freedom of speec ...

  2. ifndef/define/endif 和 #ifdef 、#if 作用和用法

    为了能简单的看看某些linux内核源码,复习了一下c语音,今天汇总了一下关于宏定义的相关内容: 一.ifndef/define/endif用法: .h文件,如下: #ifndef XX_H #defi ...

  3. 【BZOJ1336】[Balkan2002]Alien最小圆覆盖 随机增量法

    [BZOJ1336][Balkan2002]Alien最小圆覆盖 Description 给出N个点,让你画一个最小的包含所有点的圆. Input 先给出点的个数N,2<=N<=10000 ...

  4. EasyDSS流媒体视频实时回传与录像管理解决方案

    一.背景 1.1 方案背景 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种技术的大规模商用,视频在各行各业越来越受到重视,无论是传统的视频媒体转向 ...

  5. 在pycharm中误删了Python文件,怎么办,挺急的?

    1.今天在操作的时候,误删了文件,怎么办? (1)找到删除的上一级文件=>右键,找到Local History=>Show History (2),打开之后,双击左边的恢复时间内容,在右边 ...

  6. .htaccess技巧: URL重写(Rewrite)与重定向(Redirect) (转)

    目录 Table of Contents 一.准备开始:mod_rewrite 二.利用.htaccess实现URL重写(rewrite)与URL重定向(redirect) 将.htm页面映射到.ph ...

  7. 常用BAPI list

    2017-03-25 MD 主数据 1.创建物料主数据 CALL FUNCTION 'BAPI_MATERIAL_SAVEDATA' 2.创建供应商 CALL METHOD VMD_EI_API=&g ...

  8. 转载 j2ee j2se j2me 区别,mvc 和ssh联系理解

    [转]J2SE J2EE J2ME的区别 以及 MVC与SSH对应关系 2014-3-6阅读322 评论0 J2SE J2EE J2ME的区别多数编程语言都有预选编译好的类库以支持各种特定的功能,在J ...

  9. log4j 2 入门实例(1)

    本文介绍log4j的基本概念和将日志输出到控制台的例子. 参考文章: http://www.jianshu.com/p/464058bdbc76 http://www.hankcs.com/progr ...

  10. Linux下/usr/bin/python被删除的后果

    可能部分的人使用linux都有直接root登陆的习惯,这有很大的便利性,因为很多的命令不需要使用sudo请求root权限.但是使用root权限,所有的命令都会立即被执行,即使这个命令是对系统有害处的. ...