经典CSS实现三角形图标原理解析
前言:
在写这篇文章之前,我也看过很多前端大神写的代码,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实现三角形图标原理解析的更多相关文章
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- 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 ...
随机推荐
- HDU 3790 最短路径问题【Dijkstra】
题意:给出n个点,m条边,每条边的长度d和花费p,给出起点和终点的最短距离和花费,求最短距离,如果有多个最短距离,输出花费最少的 在用dijkstra求最短距离的时候,再用一个f[]数组保存下最少花费 ...
- Codeforces 500A - New Year Transportation【DFS】
题意:给出n个数,终点t 从第i点能够跳到i+a[i],问能否到达终点 #include<iostream> #include<cstdio> #include<cstr ...
- Android中的Drawable资源
在Android应用中,常常会用到Drawable资源,比如图片资源等,在Android开发中我们是用Drawable类来Drawable类型资源的. Drawable资源一般存储在应用程序目录的\r ...
- 基于HtmlUnit的模板的网页数据抽取
既然方向定了,就开始做实验室吧,做舆情分析,首先就是要收集相关的语料 正好实验室有同学在做标化院的信息抽取抽取这块 于是把程序拿过来研究研究正好 完整程序在126邮箱共享: 可下载数:20 共享连接 ...
- Spring读取配置文件的几种方式
import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileReader; imp ...
- android layoutparams应用指南(转)
LayoutParams相当于一个Layout的信息包,它封装了Layout的位置.高.宽等信息.假设在屏幕上一块区域是由一个Layout占领的,如果将一个View添加到一个Layout中,最好告诉L ...
- fcntl()功能 详解
fcntl()函数可以改变已打开文件的性质 <pre lang="c" escaped="true"> #include <unistd.h& ...
- Android下实现win8的按钮点击效果
原理就是自定义一个imageButton,实现动画效果 demo源码下载地址: 请戳这里----------------> 关于回弹张力的效果扩展,可以参考Facebook的开源动画库rebo ...
- 【UVa-442】矩阵链乘——简单栈练习
题目描述: 输入n个矩阵的维度和一些矩阵链乘表达式,输出乘法的次数.如果乘法无法进行,输出error. Sample Input 9 A 50 10 B 10 20 C 20 5 D 30 35 E ...
- Android 自定义view中的属性,命名空间,以及tools标签
昨日看到有人在知乎上问这3个琐碎的小知识点,今天索性就整理了一下,其实这些知识点并不难,但是很多开发者平时很少注意到这些, 导致的后果就是开发的时候 经常会被ide报错,开发效率很低,或者看开源代码的 ...