CSS绘制三角形的原理剖析
来源:互联网 发布:nginx 多个域名 ssl 编辑:程序博客网 时间:2024/06/07 20:27
我们一直认为的border,大概是如下所示:
.border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
效果如下:
然而,当我们增大border的值时,会看到如下效果
.border { width:50px; height:50px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
看到的效果如下所示:
我们会发现边框成为了一个梯形。
如果我们将宽高设置为0时,由于极限原理,梯形会变成三角形,看下面代码
.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
我们会看到如下效果:
那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。比如
.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F transparent transparent transparent; }
效果如下:
在设计向下三角形时,开发者只设置了左上右的边框值,然后将左右两边的边框的border-color设置为transparent。我们现在先把左右两边的border-color不设置为transparent,看看是怎么样的图形。
.border{ width: 0; height:0; border-top: 40px solid #ADFF2F; border-right: 40px solid #BA55D3; border-left: 40px solid #FF0000; }
原来当不设置下边框时,左右的边框会把下半部分切掉。到这里我们应该能完全理解bootstrap的.caret代码的原理了。
但是我们的探索并没有到此就结束,我们带着好奇心,测试如下代码:
.border { width: 0; height:0; border-top: 40px solid #ADFF2F; border-right: 40px solid #BA55D3; }
我们只设置上右的边框,得到如下结果:
似乎有点难以理解,如果我们测试如下代码,应该会恍然大悟。
.border { width: 40px; height:40px; border-top: 40px solid #ADFF2F; border-right: 40px solid #BA55D3; }
原来上面那一个例子显示成一个正方形,是因为元素的高和宽都为0,从而导致border收缩为右上角那一部分。
最有我们来看看,如果只设置元素对边的两条边框,看看会出现什么情况。
.border { width: 0; height:0; border-top: 40px solid #ADFF2F; border-bottom: 40px solid #FF0000; }
浏览器什么也不显示,分析其原因:因为元素的高和宽都为0,而且对边的两条边框没有交集,所以必然收缩为0.
最后我们来看一个应用的例子:
<span style="white-space:pre"></span>#demo { width: 200px; line-height: 100px; background-color: #fff; position: relative; border: 1px solid #5BBF5A; text-align: center; font-size: 25px; } #demo:after, #demo:before { border: solid transparent; content: ' '; width: 0; height: 0; position: absolute; } #demo:after { border-width: 10px; border-top-color: #fff; top: 100px; left: 150px; } #demo:before { border-width: 11px; border-top-color: #5BBF5A; top: 100px; left: 149px; }
效果如下:
它实现的原理很简单,就是两个三角形的叠加。
0 1
- CSS绘制三角形的原理剖析
- CSS绘制三角形的原理剖析
- CSS绘制三角形原理
- CSS:纯CSS绘制三角形(原理)
- CSS绘制常见的三角形
- 用CSS画三角形,纯CSS绘制三角形的代码
- css三角形的实现原理
- CSS:制作三角形的原理
- border的妙用:纯CSS绘制三角形
- 笔记 纯css绘制三角形原理动态演示链接地址
- 用纯css3绘制三角形的原理
- 使用CSS绘制三角形
- 纯css绘制三角形
- CSS 三角形绘制方法
- css绘制三角形方法
- CSS绘制三角形
- CSS绘制三角形
- 用css绘制三角形
- GitHub和SourceTree入门教程
- 状态模式和策略模式比较
- C#学习笔记-方法和修饰符
- 增加最少的边使有向图变为强连通图
- rails text_field/text_area/hidden_field/password_field
- CSS绘制三角形的原理剖析
- poj 3140 Contestants Division (树形dp)
- android之Service(3)Bound Service
- Freemarker 小技巧
- jfinal后台控制跳转方式
- mysql 10061
- 大数据分析工具-Splunk介绍
- 国内外最全的asp.net开源项目
- 总结OnOK()、OnCancel()、OnClose()、OnDestroy()之间的区别