前端坑

css border制作小三角形状及应用

作者：网络 发布时间: 2017-05-18 阅读：

– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.

创建一个三角形样式如下
border-width: 0px 0px 40px 50px;
border-style: solid;
border-color: transparent transparent transparent #CCCCCC;

示例2

这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么

可是, IE6下不支持透明啊~~~, 会出现下图的样子

当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.

保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形.

 

- 不过 IE 6&7 出现 bug：rc在IE6中依然显示为dispaly:block,而IE7中top 和 bottom缩成一坨,不肯扩展开来,而在rc1/rc2/rc3 中插入文字xxx后只能扩展到文字宽度,不能与bd对齐.- 见自适应圆角2该属性属性可以设置一个对象中指定的颜色为透明色, 如:

这两个的小三角行则是通过伪元素来制作，同时通过一些标签来兼容IE6和IE7的。如：

同时我还发现了一个bug，那就是在IE6下面当隐藏UL，然后鼠标经过LI时显示时小三角不显示了，不知道是什么原因，我通过给UL直接设置为visibility:hidden而不是display:none，如果你也遇到同样的情况，希望这个发现能够对你有用，如果你无视IE6、IE7，那么就直接用伪元素吧。什么hack都不用。

文章地址：http://blog.yunzhancms.com/index.php?s=/Article/detail/id/162 欢迎转载，转载时请注明出处