CSS：不可思议的border属性

本文主要是介绍CSS：不可思议的border属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文：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>