CSS实现三角形效果
2016-02-03 11:38
651 查看
CSS实现三角形效果非常简单,这里为了怕自己忘记,特意写在此文中,也供大家讨论学习
实现效果
![](http://img.blog.csdn.net/20160203113603761)
总结:实现三角形主要是靠设置border的宽度以及盒子的宽度,盒子的高度与宽度设为0,这样出来的就是第二个盒子这样的模型。所以如果需要上面的三角,只需要把其他部分的设为透明即可。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 50px; height:50px; border-style: solid; border-color: red green blue brown; border-width:10px ; } #box2{ width: 0; height:0; border-style: solid; border-color: red green blue brown; border-width:50px ; } #box3{ width: 0; height:0; border-style: solid; border-color: red transparent; border-width:50px ; } #b{ position: absolute; } .box{ display: inline-flex; } </style> </head> <body> <div id="b"> <div class="box" id="box1"></div> <div class="box" id="box2"></div> <div class="box" id="box3"></div> </div> </body> </html>
实现效果
总结:实现三角形主要是靠设置border的宽度以及盒子的宽度,盒子的高度与宽度设为0,这样出来的就是第二个盒子这样的模型。所以如果需要上面的三角,只需要把其他部分的设为透明即可。
相关文章推荐
- 安卓开发中的各种进度条样式
- CSS:列表项的一些操作
- 纯css实现扁平化360卫士logo demo
- IE 8 下面的垂直水平居中
- 个人笔记 css 03 设置表格显示外边框
- 网页设计中,相对路径与绝对路径的问题
- 2016/02/02 slicebox(css部分)
- 使用CSS实现鼠标悬停在一行上,显示某些元素
- IE10修改select样式
- 多屏复杂动画CSS技巧三则
- css+div 导航条如何横着放
- 纯css打造下拉菜单
- 纯css下拉
- css img换行之后有空隙
- 【CSS】CSS中继承性与层叠性
- 创建一个纯CSS下拉菜单
- sublime text3 安装less2css
- CSS绘制常见的几何图形
- CSS绘制常见的几何图形
- 网页性能管理详解(原作者: 阮一峰)