神奇的CSS形状
浏览:1621次 出处信息
【感谢 Neo 投递本文 - 微博帐号:@_锟_ 】
在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。
形状是:
代码是:
1
2
3
4
5
6
7 |
#triangle-up { width : 0 ; height : 0 ; border-left : 50px solid transparent ; border-right : 50px solid transparent ; border-bottom : 100px solid red ; } |
这位同学就提问啦,为啥这么这么几句就能画出一个三角形呢?
于是呢,有高人出现,这个高人图文并茂的解释了这个三角的成因
首先呢,我们需要了解HTML标记的Box Model(盒模型),这个例子中呢我们将content,padding都看作content。忽略掉margin。那么一个盒模型就是下图
中间是内容,然后是4条边。每一条边都有宽度。
根据上面CSS的定义,没有border-top(顶边)的情形下 ,我们的图形如下:
width设置为0后 ,内容没有了就成为下图:
height也设置为0,只有底边了。
然后两条边都是设置为透明,最后我们就得到了
这个属于奇技淫巧,但是也说明CSS的强大,没有做不到只有想不到。另外http://css-tricks.com/examples/ShapesOfCSS/ 还能找到很多其他的形状,感兴趣的同学可以自己去看。还有酷壳以前的这篇文章《CSS实现的各种形状》
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:自定义webkit搜索框样式
后一篇:css3 calc()功能小窥 >>
文章信息
- 作者:Neo 来源: 酷壳 - CoolShell.cn
- 标签: 形状
- 发布时间:2012-03-25 20:53:58
近3天十大热文
- [11] 产品设计之QQ邮箱登录页与淘宝登录页
- [9] Python连接 MySQL 数据库的超时问
- [9] 逃出你的肖申克(五):看不见的牢笼(上)
- [9] 分布式系统的事务处理
- [8] 读书:谣言
- [8] 五个实用的Google Analytics过
- [8] Eclipse开发Android应用程序入门
- [8] 移动Web开发初学者指南
- [8] 浅述各平台系统交互设计的不同关注点
- [8] 数据与理论结合,让交互设计更专业