magic CSS shapes
来源:互联网 发布:mac使用netkeeper上网 编辑:程序博客网 时间:2024/06/06 02:29
在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。
形状是:
代码是:
#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实现的各种形状》
- magic CSS shapes
- CSS Secret——Shapes
- 奇妙的 CSS shapes(CSS图形)
- CSS Shapes实现元素滚动自动环绕
- CSS特殊样式(八)The Shapes of CSS
- CSS Shapes:Web设计人员的新工具
- 【magic】
- magic
- Magic
- magic
- CSS Floating:Floats and Float Shapes-O'Reilly 2016(读书笔记)
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
- Shapes-Procedural
- Shapes-Procedural
- Shapes-Object
- Shapes-Object2
- Shapes-Ojbect3
- Shapes-Object4
- 《深入理解linux内核》笔记二--内存寻址
- C++转换成C的为什么在VC++6.0会运行错误
- 菜鸟
- java游戏-碰到矩形边界时反弹
- 网站压力测试之我见
- magic CSS shapes
- 就业交流会
- Struts2中的ActionContext
- CSS一些知识点
- spring 基于注解的控制器配置
- Heap Spray原理浅析
- 读写二进制文件
- MySQL不能删除外键,抱错Error on rename of './ruler/test2child' to './ruler/#sql2-298-92' (errno: 152)
- Convert a model from Maya to WebGL for use with THREE.js