CSS：不可思议的border属性_html/css

来源：动视网责编：小采时间：2020-11-27 15:58:15

CSS：不可思议的border属性_html/css

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

推荐度：

点击下载本文 文档为doc格式

导读CSS：不可思议的border属性_html/css_WEB-ITnose:译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规则。对于一些事物，例如三角形或者其它的图像，我们仍然使用图片代替。但是现在就不需要了，我们可以用CSS形成一些基本图形，我分享了一些关于这方面的技巧。 1、正三角形：

译文：不可思议的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：

效果：

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：

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

CSS：不可思议的border属性_html/css

推荐度：

点击下载本文 文档为doc格式

标签： html 属性 css

热门焦点

CSS：不可思议的border属性_html/css

CSS：不可思议的border属性_html/css

CSS：不可思议的border属性_html/css

最新推荐

猜你喜欢

热门推荐