CSS：不可思议的border属性_html/css_WEB-ITnose

译文：不可思议的CSS border属性

译者：dwqs

在CSS中，其border属性有很多的规则。对于一些事物，例如三角形或者其它的图像，我们仍然使用图片代替。但是现在就不需要了，我们可以用CSS形成一些基本图形，我分享了一些关于这方面的技巧。

1、正三角形：

.triangle_up{  height:0px; width:0px;  border-bottom:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;} 

2、倒三角形：

.triangle_down{  height:0px; width:0px;  border-top:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;} 

3、左三角形

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  float:left;} 

4、右三角形

.triangle_right{  height:0px; width:0px; float:left;  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;} 

5、十字街效果

.crossSquare{  height:0px; width:0px;  border-right:50px solid blue;  border-top:50px solid gray;  border-bottom:50px solid red;  border-left:50px solid yellow;} 

1至5的demo演示（为了演示方便，对源代码改动了一下）：http://jsfiddle.net/rt8cjtwq/embedded/result/

6、方向箭头（突出效果，改动了源代码）

CSS：

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  /*float:left;*/}.triangle_right{  height:0px; width:0px; /*float:left;*/  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;} 

HTML：

  


      
查看更多关于CSS：不可思议的border属性_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did106266