CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码:
.caret {
display: inline-block;
width:;
height:;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
我对border应用的原理不解,所以准备探索一下。我一直以边框是矩形的,如下代码
.border {
width:50px;
height:50px;
border: 2px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
当我们增大border的值时
从上图可以很明显的发现每一边的边框是梯形。
现在试想一下,我们把元素的长和宽都设置为0px,边框的值不变,我们用极限的原理解释,每一边的边框将会由梯形变成三角形,下面我们用代码来试验一下。
果然不出所料,我们得到如下结果:
那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。比如
我们再回过头来看Bootstrap中.caret的源码。似乎和我们想象中的不一样,在设计向下三角形时,开发者只设置了左上右的边框值,然后将左右两边的边框的border-color设置为transparent。我们现在先把左右两边的border-color不设置为transparent,看看是怎么样的图形。
原来当不设置下边框时,左右的边框会把下半部分切掉。到这里我们应该能完全理解bootstrap的.caret代码的原理了。
但是我们的探索并没有到此就结束,我们带着好奇心,测试如下代码:
我们只设置上右的边框,得到如下结果:
似乎有点难以理解,如果我们测试如下代码,应该会恍然大悟。
原来上面那一个例子显示成一个正方形,是因为元素的高和宽都为0,从而导致border收缩为右上角那一部分。
最有我们来看看,如果只设置元素对边的两条边框,看看会出现什么情况。
浏览器什么也不显示,分析其原因:因为元素的高和宽都为0,而且对边的两条边框没有交集,所以必然收缩为0.
最后我们来看一个应用的例子:
效果如下:
它实现的原理很简单,就是两个三角形的叠加。
CSS绘制三角形的原理剖析的更多相关文章
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- CSS绘制正五角星原理(数学模型)
尽管网上有很多CSS绘制五角星的代码案例,但是对于初学者来说可以拿来移植使用,但是在不明白其原理的情况下,进行修改移植就比较困难了.譬如想要将五角星尺寸进行缩小或者放大等设计,就需要对原代码相关数据进 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- CSS绘制三角形和箭头
<html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...
- CSS绘制三角形—border法
1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
随机推荐
- React后端管理系统-商品详情detail组件
import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'service/product-serv ...
- css权值问题
继承是没有权值的,比通配符的的权值0还要低. 选择器是不分上下级的.只管优先级. 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为0 ...
- Filter,一种aop编程思想的体现
一.filter简介 filter是Servlet规范里的一个高级特性,只用于对request.response的进行修改. filter提出了FilterChain的概念,客户端请求request在 ...
- c#简单加密和对称加密
转自:https://www.cnblogs.com/zhihai/archive/2012/05/03/2480856.html using System;using System.Collecti ...
- 爬虫学习(十四)——xpath项目实践
import osimport timeimport urllib.requestimport urllib.parsefrom lxml import etree # 构建面向对象的代码方式clas ...
- RabbitMQ安装---rpm安装
首先介绍一下个人的安装环境是Linux-centos7: 一.安装和配置rabbitmq的准备工作: 下载erlang: wget http://www.rabbitmq.com/release ...
- 封装动态数组类Array
功能: 1.增.删.改.查 2.扩容.缩容 3.复杂度分析 4.均摊复杂度 5.复杂度震荡 分析动态数组的时间复杂度: 分析resize的时间复杂度: public class Array<E& ...
- 页面刷新 方法总结 JSP刷新
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
- form表单submit按钮提交页面不跳转
方案一 <html> <body> <form action="" method="post" target="nm_i ...
- ./vi: line 2: mkdir: command not found
当前两天博主在写脚本的时候,运行脚本时候总是出现此消息,很郁闷, 开始我以为可能是我mkdir的函数库依赖的问题,但是当我用其他的脚本创建 目录的时候,命令又可以用了,找了半天,终于找到了答案 --- ...