CSS实例:纯CSS打造斜角
关于CSS打造斜角,先说一下汗青,在CSS+DIV风行早年,也就是用表格作为网页框架的时辰,人们通过在一个单位格里插手一个斜角图片来来做这种结果的。这种技能此刻已经完全过期了,这里不接头。CSS+DIV鼓起往后,呈现了两种建造斜角结果的要领,一个是通过backgroud-image属性添加斜角图片作为配景,而且用padding属性使内容缩进,不超出斜角的界线。这种要领也不在这篇文章的接头范畴。 这次要说的是纯CSS打造的斜角,也就是说完全不必要图片。 相对付纯CSS打造圆角,做斜角简朴多了。请看以下实例:
运行后结果如下图: 看图后各人应该已经知道了斜角发生的道理。一个元素相连的两条border相接处为斜角的特点,增大border的宽度,并添补差异的颜色。从而发生肉眼可见的斜角。 下面在来看看怎么发生其他角度的斜角。看以下代码:
运行后结果如下图: 信托到这里各人也大白了,譬喻你要做的一个60°的斜角,那就计较一下60°的tan(正切)值,并按照比例来界说相干border的宽度吧。 出处:http://blog.imblol.com/ (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |