不可思议的CSS border属性----纯CSS制作三角形
2015-10-30 15:47
579 查看
在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。
1、正三角形:
2、倒三角形:
3、左三角形
4、右三角形
5、十字街效果
1至5的demo演示(为了演示方便,对源代码改动了一下):http://jsfiddle.net/rt8cjtwq/embedded/result/
6、方向箭头(突出效果,改动了源代码)
CSS:
HTML:
效果:
7、制作一个Delicious Logo:
CSS:
HTML:
效果:(左上角的边框颜色是白色)
转载:http://www.ido321.com/1200.html
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>
效果:(左上角的边框颜色是白色)
转载:http://www.ido321.com/1200.html
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签