magic CSS shapes

转载 2012年03月24日 23:19:26

在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实现的各种形状

相关文章推荐

poj 3449 Geometric Shapes 计算几何

poj 3449 Geometric Shapes 计算几何 While creating a customer logo, ACM uses graphical utilities to draw ...
  • k_l_c_
  • k_l_c_
  • 2016年08月02日 21:08
  • 285

Snakes, Shapes, and Gradient Vector Flow

  • 2010年04月22日 11:09
  • 433KB
  • 下载

Approximation and decomposition of shapes

  • 2009年07月14日 09:32
  • 3.67MB
  • 下载

poj 3449 Geometric Shapes(多边形相交判断)

Geometric Shapes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1056 ...
  • fp_hzq
  • fp_hzq
  • 2012年08月09日 10:32
  • 750

Shapes小例子

  • 2014年06月11日 00:12
  • 3.5MB
  • 下载

All shapes

  • 2016年01月07日 12:54
  • 2.39MB
  • 下载

operands could not be broadcast together with shapes

今天在对着http://cs231n.github.io/python-numpy-tutorial练习matplotlib显示图片的时候,       img_tinted = img * [1, ...

Curve Shapes: Comparison and Alignment

  • 2013年07月02日 20:02
  • 508KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:magic CSS shapes
举报原因:
原因补充:

(最多只允许输入30个字)