神奇的CSS形状
2014-02-21 21:45
295 查看
在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。
形状是:
这位同学就提问啦,为啥这么这么几句就能画出一个三角形呢?
于是呢,有高人出现,这个高人图文并茂的解释了这个三角的成因
首先呢,我们需要了解HTML标记的Box Model(盒模型),这个例子中呢我们将content,padding都看作content。忽略掉margin。那么一个盒模型就是下图
中间是内容,然后是4条边。每一条边都有宽度。
根据上面CSS的定义,没有border-top(顶边)的情形下 ,我们的图形如下:
width设置为0后 ,内容没有了就成为下图:
height也设置为0,只有底边了。
然后两条边都是设置为透明,最后我们就得到了
这个属于奇技淫巧,但是也说明CSS的强大,没有做不到只有想不到。另外http://css-tricks.com/examples/ShapesOfCSS/ 还能找到很多其他的形状,感兴趣的同学可以自己去看。还有酷壳以前的这篇文章《CSS实现的各种形状》
(转载本站文章请注明作者和出处 酷壳 – CoolShell.cn )
形状是:
#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实现的各种形状》
(转载本站文章请注明作者和出处 酷壳 – CoolShell.cn )
相关文章推荐
- css background 属性设置鼠标滑过图片跳动效果
- CSS中expression使用简介
- CSS Expressions有多可怕
- Windows2008 II7 MVC4环境中CSS,js路径错误的问题
- ie10中元素超出父元素的宽度时不能自动隐藏
- CSS3实现的简单下拉框菜单
- CSS3实现的简单下拉框菜单
- 动态样式语言Less学习笔记
- 解决Sublime3下Less2CSS插件报错,并且不能修改设置解决的问题
- 常用的CSS缩写语法小结可帮助你减少CSS文件大小
- css特效 一道闪光在图片上划过代码
- CSS学习笔记(基本知识)
- CSS样式表中的优先权
- CSS中overflow的含义与属性
- css3的一个书签页
- css3 box-flex 弹性盒模型的应用
- html css将表头固定的最直接的方法
- 10个CSS简写/优化技巧
- CSS定义Radio单选项和Checkbox复选框样式有效代码
- css3中检验表单的required,focus,valid和invalid样式