纯CSS写三角形-border法[基础篇]

注意：所有知识点将不考虑IE6 (￣▽￣")

 

 

在制作如上图所示的三角形时，我们基本采用PNG或GIF图片来实现，这种形式在编写代码时较容易掌握，所以得到普遍制作者的认可。但涉及到后期优化维护的话，就需要不断的修改图片，在图形编辑器和代码编辑器之间来回切换，这无疑是加大了工作量。所以，如果单纯利用CSS来写的话，不但可以减少网站零碎图片的数量、减少了加载图片的时间，而且在修改时不用再重新切图，减少工作量。

CSS3出现以后，“方形旋转45度”制作三角形的方法固然炫酷，在兼容性上却差了点意思。所以这里要讲的是利用CSS2来写三角形，兼容所有浏览器（IE6）。

当然，任何方法都不会是十全十美的，在用CSS制作三角形时，必须存在一个甚至多个没有内容的空标签，例如<span></span>或<div></div>，如果有代码洁癖的人，请慎用~

主要用到的CSS属性是border（还不了解border用法的孩子们可以去w3c上学习下~）。

 

首先，写一个宽高都为0的空div样式：

1 2 3 4 5 6 7

.border_zero{      width : 0 ;      height : 0 ;      border-width : 30px ;      border-style : solid ;      border-color : #c03 #fc0 #69c #6c6 ; /* 红 黄 蓝 绿 */ }

效果如图：

我们要利用的正是border的这种边彼此叠加的性质来制作三角形，只要让其他三条边隐藏起来就可达到效果。

通过上面的原理，我们来制作一个指向下的三角形：

1 2 3 4 5 6 7

.triangle_down{      width : 0 ;      height : 0 ;      border-width : 30px 30px 0 ;      border-style : solid ;      border-color : #c03 transparent transparent ; /* 红 透明 透明 */ }

效果如图：

border-color:#c03 transparent transparent ;是将需要隐藏的边的颜色设置成透明；

border-width:30px 30px 0; 是将三角形对边的宽度设置为0（这里对边是border-bottom）。

这么做的原因是减小三角形有效作用区域。如果只改变颜色透明，而不改宽度会怎么样呢？

我们来给这个样式添加个阴影看下（这里建议用FF和CHROME浏览器查看效果）。

1 2 3 4 5 6 7 8

.triangle_down_big{      width : 0 ;      height : 0 ;      border-width : 30px ;      border-style : solid ;      border-color : #c03 transparent transparent ; /* 红 透明 透明 */      box-shadow: 0 0 2px rgba( 0 , 0 , 0 , 1 ); /* 添加黑色阴影，查看三角形有效作用区域 */ }

效果如图：

改变对边宽度为0后，

1 2 3 4 5 6 7 8

.triangle_down_small{      width : 0 ;      height : 0 ;      border-width : 30px 30px 0 ;      border-style : solid ;      border-color : #c03 transparent transparent ; /* 红 透明 透明 */      box-shadow: 0 0 2px rgba( 0 , 0 , 0 , 1 ); /* 添加黑色阴影，查看三角形有效作用区域 */ }

效果如图：

两种效果对比之下，虽然三角形看起来大小相同，但实际有效作用区域是不相同的。了解这一点，是为以后来写js的tip弹出层效果时做准备。

通过上面的内容，我们就可以开始写文章最开头引用效果图的样式了。

HTML:

1 2 3 4 5 6

< div class = " test_zone" >      < div class = "test_triangle" >          < a href = "#" >三角形</ a >          < div class = "popup" >< span ></ span >纯CSS写三角形</ div >      </ div > </ div >

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

.test_triangle{      width : 200px ;      margin : 0 auto 20px ;      position : relative ; } a{      color : #3FB58E ;      font-weight : bold ;      text-decoration : none ; } .popup{      width : 100px ;      background : #3FB58E ;      padding : 10px 20px ;      color : #fff ;       border-radius: 4px ;      position : absolute ;      top : 30px ;      left : 30px ; } .popup span{      display : block ;      width : 0 ;      height : 0 ;      border-width : 0 10px 10px ;      border-style : solid ;      border-color : transparent transparent #3FB58E ;      position : absolute ;      top : -10px ;      left : 50% ; /* 三角形居中显示 */      margin-left : -10px ; /* 三角形居中显示 */ }

以上主要是border法写三角形的基础内容，后续会再整理一些“晋级”类的总结~_(:з)∠)_