用CSS画个三角形
2016-05-28 13:41
701 查看
<!DOCTYPE html> <html> <head> <style type="text/css"> #trangle { display: inline-block; width: 200px; height: 200px; border-left: 100px solid #333; border-right: 100px solid #678; border-top: 100px solid #91b; border-bottom: 100px solid #eee; } </style> </head> <body> <span id="trangle"></span> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> #trangle { display: inline-block; border-left: 100px solid #333; border-right: 100px solid #678; border-top: 100px solid #91b; } </style> </head> <body> <span id="trangle"></span> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> #trangle { display: inline-block; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid #91b; } </style> </head> <body> <span id="trangle"></span> </body> </html>
把两边设置transparent透明就可以l,利用border的特性
相关文章推荐
- CSS样式总结
- css备忘录(关于relative、absolute)
- CSS图片与文字水平对齐
- CSS选择器优先级
- CSS的一些小的注意点整理
- 《CSS权威指南》学习记录——特殊性和层叠
- 0.5px边框,css及sass
- CSS FILTERS:CSS过滤器能够做什么?
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- 纯css实现菜单激活状态切换
- CSS之Transform
- 《CSS权威指南》学习记录——选择器
- 控制CSS样式
- css的小技巧
- css实现三角形原理
- 转载 css放大效果实现
- Web前端学习第十二天·fighting_使用CSS布局和定位(二)
- Dialog_ _dialog系统样式讲解 及 透明背景
- (一)CSS书写基础、背景、文字属性
- background-position的百分比是怎么计算定位的