前言:

  在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对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; }

更多的边框值详见:W3C border-style 10种属性值

进入正题:

首先来看一下正常块元素设置四条不同颜色边框效果:为了效果明显,所有边框宽度均为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:;
height:;
border-top: 50px solid #ff0000;
border-bottom: 50px solid #00a000;
border-left: 50px solid #ff7f50;
border-right: 50px solid #436eee;
text-align: center;
}

俗话说,没有规矩,不成方圆。一定要养成书 CSS 代码规范,推荐参考 Bootstrap CSS书写规范,从现在做起。

我相信,看到上面效果图,距离我们实现三角形四个方向带箭头已经不远了,

如果我们将上图的下边框颜色设置为透明,即 border-right: 50px solid transparent;

效果如下:

如果我们我们去掉 border-bottom ,效果相信大家都能猜到,CSS 和 如下图所示:

.test-border {
width:;
height:;
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:;
height:;
border-top: 50px solid #ff0000;
border-left: 50px solid #ff7f50;
}

没错,效果就是这样,变成正方形了,等等我们是不是走错路了,现在的效果是不是我们的三角箭头原来越远了?那我们继续没有去掉border-bottom上来展开思考,

怎么样才能达到我们想要的效果呢?既不能去掉上边框也不能去掉下边框,我们可不可以隐藏上边框和下边框呢?秘密就在这儿。大家都知道css颜色有一个属性值 transparent

如果我们将上边框和下边框的颜色设置成透明会怎么样?自己在慢慢想象一下,效果如下:

.test-border {
width:;
height:;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #ff7f50;
}

哇,这不就是传说中我们梦寐以求的向右的三角箭头么. 好神奇,我居然做到了。讲了这么多,请让我喝口水压压惊。

到这儿我们的css三角形图标原理解析快接近尾声了。接下来给出其余三个三角箭头 CSS 代码和效果图。

箭头向左:

.test-border {
width:;
height:;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #436eee;
}

箭头向下:

.test-border {
width:;
height:;
border-top: 50px solid #ff0000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

箭头向上:

.test-border {
width:;
height:;
border-bottom: 50px solid #00a000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

到此就讲完了,很高兴和大家分享,如果你有好的知识点,希望您也和大家分享。如果有不对的地方,还请大家指正。

  

经典CSS实现三角形图标原理解析的更多相关文章

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

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

  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. ASP.NET MVC 实现二级域名

      自从微软发布 ASP.NET MVC 和routing engine (System.Web.Routing)以来,就设法让我们明白你完全能控制URL和routing,只要与你的applicati ...

  2. Ref相关的名词解释

    NV (NOT-VOLATILE),即非易失性,断电不会丢失的存储信息,包括生产信息.客户信息.产品信息等等. 它们都保存在不同(FLASH)分区,并根据不同的分区提供不同的接口.数据结构和管理机制. ...

  3. Hadoop学习总结之三:Map-Reduce入门

    1.Map-Reduce的逻辑过程 假设我们需要处理一批有关天气的数据,其格式如下: 按照ASCII码存储,每行一条记录 每一行字符从0开始计数,第15个到第18个字符为年 第25个到第29个字符为温 ...

  4. Android 一步一步教你使用ViewDragHelper

    在自定义viewgroup的时候 要重写onInterceptTouchEvent和onTouchEvent 这2个方法 是非常麻烦的事情,好在谷歌后来 推出了ViewDragHelper这个类.可以 ...

  5. GenericRepository

    public interface IGenericRepository<TEntity> where TEntity : class { IQueryable<TEntity> ...

  6. 使用C#代码审批/转签K2 Blackpearl流程

    转:http://www.cnblogs.com/dannyli/archive/2011/08/02/2125302.html 以下是使用代码审批.转签k2 blackpearl流程,初探K2 Bl ...

  7. IOS 单例 创建方式

    @implementation Me static Car *sharedInstance= nil;//声明一个静态对象引用并赋为nil +(Me *) sharedInstance//声明类方法( ...

  8. 插件五之滚动条jquery.slimscroll.js

    前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...

  9. 通过HttpClient来调用Web Api接口

    回到目录 HttpClient是一个被封装好的类,主要用于Http的通讯,它在.net,java,oc中都有被实现,当然,我只会.net,所以,只讲.net中的HttpClient去调用Web Api ...

  10. Ajax轮询以及Comet模式—写在Servlet 3.0发布之前(转)

    2008 年的夏天,偶然在网上闲逛的时候发现了 Comet 技术,人云亦云间,姑且认为它是由 Dojo 的 Alex Russell 在 2006 年提出.在阅读了大量的资料后,萌发出写篇 blog ...