CSS：不可思议的border属性

落日映苍穹つ 2022-08-14 00:51 130阅读 0赞

原文：[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/][http_jsfiddle.net_rt8cjtwq_embedded_result]

![Center][]

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：

效果：

![Center 1][]

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：

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

![Center 2][]

推荐文章：[重温CSS：Border属性][CSS_Border]

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

[Magic of CSS border property]: http://www.ido321.com/1200.html
[http_jsfiddle.net_rt8cjtwq_embedded_result]: http://jsfiddle.net/rt8cjtwq/embedded/result/
[Center]: /images/20220810/b71dec58dd6b46b89cbd819a5a19ff02.png
[Center 1]: /images/20220810/7777583270cb4199989eb8651d127cb2.png
[Center 2]: /images/20220810/f9ff819b180b4058a2f2d77e49650eb1.png
[CSS_Border]: http://yanhaijing.com/css/2014/02/22/css-refresher-border/
[8_PHP_]: http://www.ido321.com/1202.html