纯CSS写三角形-border法
2016-04-11 16:53
387 查看
(1)有边框的三角形
我们来写下带边框的三角形。
如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。
最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
这里就涉及到一个绝对定位的问题,上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下,当定位都为0(left:0px; top:0px;)时,会发生什么。
HTML:
我们来写下带边框的三角形。
如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。
最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
这里就涉及到一个绝对定位的问题,上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下,当定位都为0(left:0px; top:0px;)时,会发生什么。
HTML:
<!-- 向上的三角形 -->
相关文章推荐
- CSS兼容性问题汇总
- CSS的水平居中与垂直居中
- CSS强制英文、中文换行与不换行 强制英文换行
- [1] Word样式/主题/模板
- CSS3学习系列之颜色
- css display:box 新属性
- css3-新增的选择器
- CSS3之边框图片
- POI Excel导出样式设置
- <css 十一>relative相对定位、absolute绝对定对
- CSS效果
- 导入样式表与链入样式表区别
- HTML/CSS测试代码二
- PowerDesigner的样式设置
- sass 学习总结1
- @import导入外部样式表与link链入外部样式表的区别
- CSS样式表与格式布局
- 搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax
- 使用CSS3编写类似iOS中的复选框及带开关的按钮
- Css3 - 动画旋转