首页 > 代码库 > CSS：不可思议的border属性

CSS：不可思议的border属性

2024-08-02 08:54:38   220人阅读

原文：Magic of CSS border property

译文：不可思议的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：
<div class="arrow">  <div class="triangle_right"></div>  <div class="arrowLine"></div></div><div class="arrow">  <div class="arrowLine"></div>  <div class="triangle_left"></div></div>
效果：

     7、制作一个Delicious Logo：
CSS：
.delociousLogo {   height:100px; width:100px; } .topleft {   height:0px; width:0px;   border-top:50px solid #FFFFFF;   border-right:0px solid #FFFFFF;   border-bottom:0px solid #FFFFFF;   border-left:50px solid #FFFFFF;   float:left; } .topright {   float:left;   height:0px; width:0px;   border-top:50px solid #0000CC;   border-right:0px solid #0000CC;   border-bottom:0px solid #0000CC;   border-left:50px solid #0000CC; } .bottomleft {   float:left;   height:0px; width:0px;   border-top:50px solid #000000;   border-right:0px solid #000000;   border-bottom:0px solid #000000;   border-left:50px solid #000000; } .bottomright {   float:left;   height:0px; width:0px;   border-top:50px solid #999999;   border-right:0px solid #999999;   border-bottom:0px solid #999999;   border-left:50px solid #999999; }

 

HTML：
<div class="delociousLogo">  <div class="topleft"></div>  <div class="topright"></div>  <div class="bottomleft"></div>  <div class="bottomright"></div></div>

 

效果：（左上角的边框颜色是白色）

推荐文章：重温CSS：Border属性

 

下一篇：8个很有用的PHP安全函数，你知道几个？

CSS：不可思议的border属性


联系
我们