用css的border属性兑现三角
日期：2014-05-17 浏览次数：20835 次
用css的border属性实现三角
在一个宽高为0像素的块状元素中设置border属性，例如
01 |
.box{ |
02 |
? |
03 |
width:0px;
|
04 |
? |
05 |
height:0;
|
06 |
? |
07 |
border-bottom:50px #F00 solid;
|
08 |
? |
09 |
border-left:50px #03F solid;
|
10 |
? |
11 |
border-right: 50px #F90 solid;
|
12 |
? |
13 |
border-top:50px #6C0 solid;
|
14 |
? |
15 |
} |
在浏览器中的显示如图：
这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。
例如这样就能得到一个颜色为#CCC的向上的三角：
01 |
.to-top{
|
02 |
? |
03 |
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
