【转载】css实现三角形。]
本文共 2482 字，大约阅读时间需要 8 分钟。
最后的demo我自己画了个例子~ 就是两个三角形的叠加， after白色的 border宽度改小， 可以看到。qwq。
我以前还没工作的时候写的都是什么高大上东西………………………… 工作之后写的反而好像小儿科。 好了下面是转载的
===========================================================================
今天学习Bootstrap时候，看到按钮的向下三角形源码：
.caret {
display: inline-block; width: 0; height: 0; 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 {
width:50px; height:50px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
从上图可以很明显的发现每一边的边框是梯形。
现在试想一下，我们把元素的长和宽都设置为0px,边框的值不变，我们用极限的原理解释，每一边的边框将会由梯形变成三角形，下面我们用代码来试验一下。
.border {
width:0px; height:0px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; } 果然不出所料，我们得到如下结果：
.border {
width:0px; height:0px; border: 20px solid; border-color: #ADFF2F transparent transparent transparent; }
.border {
width: 0; height:0; border-top: 40px solid #ADFF2F; border-right: 40px solid #BA55D3; border-left: 40px solid #FF0000; }
但是我们的探索并没有到此就结束，我们带着好奇心，测试如下代码：
.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.最后我们来看一个应用的例子：
<p style="white-space:pre" id="demo"> 想变强吗？</p>
#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; } 效果如下：这里我自己画了~~
它实现的原理很简单，就是两个三角形的叠加。
原文
你可能感兴趣的文章
JavaScript substr() 方法
查看>>
JavaScript slice() 方法
查看>>
JavaScript substring() 方法
查看>>
HTML 5 新的表单元素 datalist keygen output
查看>>
（转载）正确理解cookie和session机制原理
查看>>
jQuery ajax - ajax() 方法
查看>>
将有序数组转换为平衡二叉搜索树
查看>>
最长递增子序列
查看>>
从一列数中筛除尽可能少的数，使得从左往右看这些数是从小到大再从大到小...
查看>>
判断一个整数是否是回文数
查看>>
经典shell面试题整理
查看>>
腾讯的一道面试题—不用除法求数字乘积
查看>>
素数算法
查看>>
java多线程环境单例模式实现详解
查看>>
将一个数插入到有序的数列中，插入后的数列仍然有序
查看>>
在有序的数列中查找某数，若该数在此数列中，则输出它所在的位置，否则输出no found
查看>>
万年历
查看>>
作为码农你希望面试官当场指出你错误么？有面试官这样遭到投诉！
查看>>
好多程序员都认为写ppt是很虚的技能，可事实真的是这样么？
查看>>
如果按照代码行数发薪水会怎样？码农：我能刷到公司破产！
查看>>