css画三角形边长宽高原理分析

css绘制三角形,已经有很多大神写过很详细的用法,在此不做赘述;http://www.jb51.net/article/42513.htm

最近一个项目需要用到精确到1px的三角形,但是查遍所有教程都只有用法,而没有对边长和宽高进行具体原理分析,导致此处修改数次耽误了挺长时间才做到让设计师同事满意;所以在项目结束后,通过chrome dev tool 详细分析下边长和宽高原理;

先看一段代码:

<div style="width:0;height:0;border-left:60px solid transparent;border-right:40px solid transparent;border-top:50px solid #ddd;"></div>

下面是这个代码在浏览器中的样子:

通过chrome dev tool 查看,这个三角形的宽是100px,高是50px;

由此可知:

此三角形的高(此处所说的高以中学课本定义为准:即顶点到底边的垂线)为有颜色的border(即#ddd)的border-width;

而底边被垂线分成两部分,分别是对应的border的border-width;

底边边长是两个transparent的border的border-width相加之和;

版权所有©转载必须以链接形式注明作者和原始出处

发表评论

电子邮件地址不会被公开。 必填项已用*标注