css绘制三角形方法
2015-06-01 17:39
411 查看
1.三角形的最终效果
第一步,四个边框线50像素，高度宽度都为0， 可以看出每个边框都是个三角形，四个边框组成了正方形
第二步, 我们试着去掉一条边框，我们去掉下边框发现原来是正方形的色块底部被截掉了1/2
第三步，这个时候我们隐藏左边和右边的边框线就绘制出了三角形。。ps：这里是隐藏边框即将边框颜色设置为透明色，如果去掉两条边框就绘制不出了。不明白的可以做实验试验一下
第一步,四个边框线50像素，高度宽度都为0， 可以看出每个边框都是个三角形，四个边框组成了正方形
第二步, 我们试着去掉一条边框，我们去掉下边框发现原来是正方形的色块底部被截掉了1/2
第三步，这个时候我们隐藏左边和右边的边框线就绘制出了三角形。。ps：这里是隐藏边框即将边框颜色设置为透明色，如果去掉两条边框就绘制不出了。不明白的可以做实验试验一下
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 表格样式
- CSS3 transition transform
- CSS 背景图随div大小缩放 兼容IE
- CSS 判断IE并执行样式
- CSS + ul li 横向排列的方法
- 关于CSS布局的一些经验
- 10_css控制背景与css精灵.txt
- 6_css选择符详解.txt
- 5_css控制文字及链接.txt
- 4_css语法及优先权.txt
- 3_css语法.txt
- 2_css理解.txt
- 图文详解CSS的position常用的三个属性：relative,absolute以及fixed,以及嵌套使用的一个常见情况
- 25_css缩放zoom.html
- 24_css定位布局_相对定位.html
- 24_css定位布局_绝对定位.html
- 23_css清除浮动的三种方法.html
- 23_css清除浮动.html
- 22_css浮动布局示例.html
- 21_css布局3_定位布局.html