使用border做三角形
来源:互联网 发布:php 清空cookie 编辑:程序博客网 时间:2024/04/30 09:07
网站上经常会使用一些三角形,除了图片的方式,实际上利用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); }
分类: CSS
0 0
- 使用border做三角形
- 使用border做三角形
- 使用border做三角形
- 使用border做三角形
- 使用border做三角形
- 使用border 画三角形
- css border制作三角形、圆角框等的使用
- CSS Border使用小分享--css实现小三角形等
- 如何使用纯CSS画出三角形之border法
- CSS border实现三角形
- css border 画三角形
- CSS border实现三角形
- CSS border实现三角形
- border模拟小三角形
- border画三角形
- html border画三角形
- 利用border创建三角形
- css之border&三角形
- Android自定义控件系列二:自定义开关按钮(一)
- 《unix高级环境编程》文件和目录——文件权限
- 安卓巴士总结了近百个Android优秀开源项
- Windows server2012 (64位IIS)未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
- AES加密算法在GPU上的实现
- 使用border做三角形
- IOS中数字的格式化
- ASP.NET MVC ModelValidator小结
- xslt转换xml为html文件时如何给其标签动态添加id属性?
- 稀疏编码最优化解法
- android源码大放送(实战开发必备)
- SQL2012 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
- 仿微信朋友圈,点击评论,生成自定义超链接,并处理
- 类,对象,方法,属性,事件的关系