用border做三角形
2015-06-06 12:00
260 查看
网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的?
.t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }
通过demo可以看到border的相交的地方在45deg平分,当元素的width、和height属性呗设置为0的时候
.t1{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }
这样我们就可以看到三角形了,尝试一下去掉两个边框,值保留上边和左边
.t2{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; }
这时候做三角形好像简单了,只要我们保留两个相邻边,把另外的一个设置为透明就可以了
.t3{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-right:solid 100px rgba(0,0,0,0); }
这样我们就有一个直角三角形了,稍微修改一下
.t4{ margin:30px; height:0px; width:0px; border-top:solid 90px red; border-left:solid 200px rgba(0,0,0,0); }
这样做等腰直角三角形也简单了,保留相邻的三个边,两个设置为透明就行了
.t5{ margin:30px; height:0px; width:0px; border-top:solid 200px red; border-left:solid 200px rgba(0,0,0,0); border-right:solid 200px rgba(0,0,0,0); }
再稍微调整一下,还可以做出各种形状
.t6{ margin:30px; height:0px; width:0px; border-left:solid 100px green; border-top:solid 100px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }
.t7{ margin:30px; height:0px; width:0px; border-left:solid 200px green; border-top:solid 80px rgba(0,0,0,0); border-bottom:solid 80px rgba(0,0,0,0); }
.t8{ margin:30px; height:0px; width:0px; border-left:solid 100px green; border-top:solid 200px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }
.t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }
通过demo可以看到border的相交的地方在45deg平分,当元素的width、和height属性呗设置为0的时候
.t1{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue; }
这样我们就可以看到三角形了,尝试一下去掉两个边框,值保留上边和左边
.t2{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; }
这时候做三角形好像简单了,只要我们保留两个相邻边,把另外的一个设置为透明就可以了
.t3{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-right:solid 100px rgba(0,0,0,0); }
这样我们就有一个直角三角形了,稍微修改一下
.t4{ margin:30px; height:0px; width:0px; border-top:solid 90px red; border-left:solid 200px rgba(0,0,0,0); }
这样做等腰直角三角形也简单了,保留相邻的三个边,两个设置为透明就行了
.t5{ margin:30px; height:0px; width:0px; border-top:solid 200px red; border-left:solid 200px rgba(0,0,0,0); border-right:solid 200px rgba(0,0,0,0); }
再稍微调整一下,还可以做出各种形状
.t6{ margin:30px; height:0px; width:0px; border-left:solid 100px green; border-top:solid 100px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }
.t7{ margin:30px; height:0px; width:0px; border-left:solid 200px green; border-top:solid 80px rgba(0,0,0,0); border-bottom:solid 80px rgba(0,0,0,0); }
.t8{ margin:30px; height:0px; width:0px; border-left:solid 100px green; border-top:solid 200px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0); }
相关文章推荐
- 我的Java开发学习之旅------>Java语言中方法的参数传递机制
- linux静态库的生成与使用(转)
- 谷歌图片搜索
- 少了分析技能,大数据毫无用处
- JavaScript中的substr()方法使用详解
- oracle数据库未打开解决办法
- 获取WebView加载网页后的cookies
- 探讨PHP页面跳转几种实现技巧
- 中国牛市又造出了八名新富豪
- 做教育管理系统时 遇到的一些问题 总结 培训机构管理系统 中小学管理系统 托管系统 语数英物化
- Emberjs之Observer
- 常见音频格式
- 20.Valid Parentheses
- okhttp
- C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密
- opencv HOG中detectMultiScale函数详解
- 程序员必备,C#各类项目、开源项目插件资料收藏
- Oracle connect by prior理解
- 用VS2010检查两个MSSQL数据库的架构差异并同步
- 0. chromium源代码分析 - 序