神奇的CSS形状
2024-10-08 01:42:25
在StackOverflow上有这么一个问题,有位同学在
http://css-tricks.com/examples/ShapesOfCSS/
找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。
形状是:
代码是:
#triangle-up {
width: ;
height: ;
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/ 还能找到很多其他的形状,感兴趣的同学可以自己去看。
最新文章
- 2014ACM/ICPC亚洲区北京站
- 一键配置本地yum源
- GitHub注册流程(中英对比)
- 弹出消息对话框ScriptManager
- Spring 框架概述
- Java元组类型之javatuples
- SGU 101 修改
- SEDA工作笔记(一)
- cocos2dx android lua文件设置问题
- ios 动画学习的套路 (二)
- Lambda&;Java多核编程-5-函数式接口与function包
- 根据list得到list中的最大值最小值
- Lenovo T440p 外放没有声音
- Django入门-基本数据库API
- 实现string到double的转换
- 【基于url权限管理 shiro(一)】--基础
- hadoop记录-如何换namenode机器
- Mysqli扩展类
- 如何将R中的data frame对象的数据导入到DB
- R绘图 第十一篇:统计转换、位置调整、标度和向导(ggplot2)