最近看到网上有很多用css3实现三角形及各种复杂图形的代码,看到代码的时候一头雾水,索性用半天的时间好好研究了一下背后的实现原理。话不多说,先上代码:
<html> <head> <style type="text/css"> p{ float:left; margin-right:20px; } #triangle-full { width:0px; height:0px; border-left: 50px solid pink; border-bottom: 50px solid gray; border-top: 50px solid green; border-right: 50px solid red; } #triangle-lack-left { width:0px; height:0px; border-bottom: 50px solid gray; border-top: 50px solid green; border-right: 50px solid red; } #triangle-lack-right{ width:0px; height:0px; border-left: 50px solid pink; border-bottom: 50px solid gray; border-top: 50px solid green; } #triangle-lack-top{ width:0px; height:0px; border-left: 50px solid pink; border-bottom: 50px solid gray; border-right: 50px solid red; } #triangle-lack-bottom{ width:0px; height:0px; border-left: 50px solid pink; border-top: 50px solid green; border-right: 50px solid red; } #triangle-has-left{ width:20px; height:20px; border-top: 50px solid pink; border-left: 50px solid pink; border-bottom: 50px solid gray; } #triangle-has-right{ width:20px; height:20px; border-right: 50px solid pink; border-bottom: 50px solid gray; } #triangle-has-top{ width:20px; height:20px; border-left: 50px solid pink; border-top: 50px solid gray; } #triangle-has-bottom{ width:20px; height:20px; border-right: 50px solid pink; border-top: 50px solid gray; } #triangle-has-topbottom{ width:0px; height:10px; border-bottom: 50px solid pink; border-top: 50px solid gray; } #triangle-has-onlyleft{ width:10px; height:10px; background:black; border-left: 50px solid pink; } </style> </head> <body> <p id="triangle-full"></p> <p id="triangle-lack-left"></p> <p id="triangle-lack-right"></p> <p id="triangle-lack-top"></p> <p id="triangle-lack-bottom"></p> <div style="clear:both"></div> <p id="triangle-has-left"></p> <p id="triangle-has-right"></p> <p id="triangle-has-top"></p> <p id="triangle-has-bottom"></p> <p id="triangle-has-topbottom"></p> <p id="triangle-has-onlyleft"></p> </body> </html>
上面的代码运行结束后,总的显示结果为:
图(1)
是不是看到这个结果感觉既酷炫,又一头雾水?好,下面就一点一点的详细解释一下吧
先上图:
图二
如图二所示,从左到右分别为保留top、right、bottom、left四个border的显示;保留剩下的三个border,取消border-left、取消border-right、取消border-top、取消border-bottom其中一个方向border的显示
图三
如图三所示,从左往右依次为:
border-left+border-bottom+content、
border-right+border-bottom+content、
border-left+border-top+content、
border-right+border-top+content、
border-left+content
从上面的显示结果可以总结出:其实在css里可以把border也看成具体的具有宽、高的元素,利用css3通过border进行三角形制作的基本原理是利用了border的叠加和均分的原理。即:同一方向上的叠加,不同方向上的均分。同一方向上,比如上下border的高度叠加得到左右boder的高,左右border的宽度叠加得到上下border的宽。不同方向上,在左下、左上、右上、右下重叠的部分进行均分,所以可以看到上图一种第一幅图在矩形对角线位置的两边有不同的颜色。
具体对应的不同方向的border的尺寸的计算为:
border-left-width = border-left-width;
border-left-height = border-top-width+contentHeight+border-bottom-width;
border-right-width = border-right-width;
border-right-height = border-top-width+contentHeight+border-bottom-width;
border-bottom-width = border-left-width+contentWidth+border-right-width;
border-bottom-height = border-bottom-height;
border-top-width = border-left-width+contentWidth+border-right-width;
border-top-height = border-top-height;
有了上面的计算公式,我们来看一下在不同情况下的结果:
1、只有两条平行的border,比如border-left和border-right
此时会发现如果元素的内容区域的宽高为0的话【内容区域宽高不为0就可以显示啦】,border即使设置了width【假如为50px】属性也是不会显示的,为什么呢?
利用公式border-left-width = border-left-width = 50px;
border-left-height = border-top-width+contentHeight+border-bottom-width = 0 + 0 + 0 = 0;
一个元素如果宽高任一值为0的话是不会显示的,border的显示也是如此哦。
2、元素只有一个方向border
如果元素内容区域的宽高不为0,则border可以显示;反之则不能显示,道理利用上面的计算公式就可以明白了。
3、三个方向或三个方向以上border
当画出在两个方向有交叉的border时,根据上面的计算公式,即使内容区域为0,border的宽和高也不会为0,所以就在页面上呈现出来,具体的显示结果可以根据叠加拆分的原理来推断。
相关推荐
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加(+)、...
CSS浮动属性Float详解 什么是CSS Float?
主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
本篇文章主要介绍了CSS3 用border写 空心三角箭头 (两种写法),非常具有实用价值,需要的朋友可以参考下
overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来; 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto; overflow:auto 属性如果超出就出现...
5.5_CSS3中filter属性详解|模糊效果和filter|canvas项目综合实战|Canvas图形、动画、游戏开发从入门
CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border...
CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构,以及...
DIV+CSS布局:CSS浮动float属性详解 不解释
CSS布局 案例详解 CSS布局 案例详解 CSS布局 案例详解CSS布局 案例详解 CSS布局 案例详解
主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变,需要的朋友可以参考下
CSS属性选择器详解.pdf
CSS3圆角详解 一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量。图片文件的生成、更新...
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
公司内部做的一个css3动画的分享,里面有每一个属性的详细介绍,并且搭配了一些例子
纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例。我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文...
前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如...