纯css实现三角原理，兼容IE

最新推荐文章于 2021-07-19 20:12:05 发布

supersxn

最新推荐文章于 2021-07-19 20:12:05 发布

阅读量1.1k

点赞数

文章标签： css css实现三角原理

本文链接：https://blog.csdn.net/supersxn/article/details/48003733

版权

css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。

如果4种颜色只保留一种颜色，余下3种颜色设置为透明（或者设置为和背景色相同的颜色），就出现一个小三角了。

只保留上面的颜色，如下图：

    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #639;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom:0px solid transparent;

IE6不兼容transparent, 左右border由 solid改为dashed.

    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #639;
    border-right: 20px dashed transparent;
    border-left: 20px dashed transparent;
    border-bottom:0px solid transparent;

Bootstrap中三角也是使用css实现。

html代码：

<span class="caret"></span>

css代码：

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed #333;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

但是在IE8下显示为空白，dashed改为solid。

如果4种颜色只保留一种颜色，余下3种颜色设置为透明（或者设置为和背景色相同的颜色），就出现一个小三角了。

示例3：
只保留上面的红色，如下图：