CSS3实现三角形效果

Bertha 。 2022-06-12 22:38 381阅读 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]

![这里写图片描述][2365187697-54a3454be9a03_articlex]

### 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：

效果：

![这里写图片描述][1195202640-54a3456e89240_articlex]

### 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：

![这里写图片描述][1203303214-54a3458ad3e8d_articlex]

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

[转载地址][Link 1]

[Magic of CSS border property]: http://www.ido321.com/1200.html
[http_jsfiddle.net_rt8cjtwq_embedded_result]: http://jsfiddle.net/rt8cjtwq/embedded/result/
[2365187697-54a3454be9a03_articlex]: https://sfault-image.b0.upaiyun.com/236/518/2365187697-54a3454be9a03_articlex
[1195202640-54a3456e89240_articlex]: https://sfault-image.b0.upaiyun.com/119/520/1195202640-54a3456e89240_articlex
[1203303214-54a3458ad3e8d_articlex]: https://sfault-image.b0.upaiyun.com/120/330/1203303214-54a3458ad3e8d_articlex
[Link 1]: https://segmentfault.com/a/1190000002454383