不可思议的Css:border属性
来源:互联网 发布:淘宝内衣店简介 编辑:程序博客网 时间:2024/05/29 16:21
在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>
效果:(左上角的边框颜色是白色)
0 0
- CSS:不可思议的border属性
- 不可思议的Css:border属性
- 不可思议的CSS border属性----纯CSS制作三角形
- CSS3:不可思议的border属性
- 巧用CSS的Border属性
- 巧用CSS的Border属性
- 巧用CSS的Border属性
- 巧用CSS的Border属性
- CSS中元素的边框border属性
- 图解CSS的padding,margin,border属性
- CSS中border-style的属性
- CSS的padding,margin,border属性
- 图解CSS的padding,margin,border属性
- CSS的padding,margin,border属性(
- 图解CSS的padding,margin,border属性
- 图解CSS的padding,margin,border属性
- 用css的border属性画三角形
- css中的border属性
- 创建表——command命令
- Android keyguid 相关
- dwz单个查找带回-带分页-查询条件
- 大数据处理之道 (htmlparser 过滤器<二>)
- Probability Meature 概率测度
- 不可思议的Css:border属性
- 检测cgi-bin漏洞存在方法
- easyios 教程
- android 将文件保存到sd卡上面(简单)
- SSIS可靠性和扩展性—简介
- Cocos2d-x 脚本语言Lua的使用
- Differences among list,set and map
- JS前端缓存缓存对象封装
- Hibernate中get和load方法的区别以及close()、clear()、evict()