css实现toolTip

title
title

1,常用border来实现三角形

原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color)

.test {
    width:0;
    height: 0;
    border-top: 100px solid red ;
    border-bottom: 100px solid blue;
    border-left: 100px solid green;
    border-right: 100px solid yellow;
}

效果如图


上面看到的都是三角形,其实想实现单个三角形只需把其他三个三角形的border-color设置为透明色就可以了
这样就实现了三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>各种三角形</title>
    <style>
     * {
         margin: 0;
         padding: 0;
         list-style: none;
     }
     li {
         margin-top: 50px;
     }
     .triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    .triangle-down {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    .triangle-left {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;
        border-bottom: 50px solid transparent;
    }
    .triangle-right {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }
    .triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    .triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent; 
    }
    .triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    .triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

    </style>
</head>
<body>
    <ul>
        <li class="triangle-up"></li>
        <li class="triangle-down"></li>
        <li class="triangle-left"></li>
        <li class="triangle-right"></li>
        <li class="triangle-topleft"></li>
        <li class="triangle-topright"></li>
        <li class="triangle-bottomleft"></li>
        <li class="triangle-bottomright"></li>
    </ul>
</body>
</html>

2,css实现toolTip(实心三角箭头)

原理:

  • 一个三角形绝对定位到主体元素边界处并连接起来
  • 把三角形的颜色换成和主体元素一致的背景色就可以
.test {
    position: relative;
    width: 300px;
    height: 100px;
    border-radius: 20px;
    margin: 100px auto;
    background-color: #A5C4EC;
}
.test:before{
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    left: 80px;
    border-left: 20px solid transparent ;
    border-right: 20px solid transparent;
    border-top: 20px solid #A5C4EC;
}

3,css实现toolTip(空心三角箭头)源码如下

原理:

  • 一个边框颜色的三角形绝对定位到主体元素边界处并连接起来
  • 另一个主体元素背景色的三角形绝对定位并覆盖到第一个三角形上面
  • 第二个三角形相较于第一个三角形定位上偏移距离应等于边框厚度
.test {
    position: relative;
    width: 300px;
    height: 100px;
    border-radius: 20px;
    margin: 100px auto;
    border: 6px solid blue;
    background-color: #A5C4EC;
}
.test:before{
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    left: 80px;
    border-left: 20px solid transparent ;
    border-right: 20px solid transparent;
    border-top: 20px solid blue;
}
.test:after{
    content: '';
    display: block;
    position: absolute;
    bottom: -14px;
    left: 80px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
}
title
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 1000px;
            margin: 0 auto;
        }
        /* 向下 */
        .toolTip-bottom {
            position: relative;
            width: 300px;
            height: 100px;
            border: 1px solid #A5C4EC;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #fff;
         }
        .toolTip-bottom:before{
            content: '';
            display: block;
            position: absolute;
            bottom: -20px;
            left: 80px;
            border-left: 20px solid transparent ;
            border-right: 20px solid transparent;
            border-top: 20px solid #A5C4EC;
        }

        .toolTip-bottom:after{
            content: '';
            display: block;
            position: absolute;
            bottom: -17.6px;
            left: 80px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #fff;
        }
          /* 向上 */
          .toolTip-top {
            position: relative;
            width: 300px;
            height: 100px;
            border: 1px solid #A5C4EC;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #fff;
         }
        .toolTip-top:before{
            content: '';
            display: block;
            position: absolute;
            top: -20px;
            left: 80px;
            border-left: 20px solid transparent ;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #A5C4EC;
        }

        .toolTip-top:after{
            content: '';
            display: block;
            position: absolute;
            top: -17.6px;
            left: 80px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #fff;
        }
        /* 向左 */
        .toolTip-left {
            position: relative;
            width: 300px;
            height: 100px;
            border: 1px solid #A5C4EC;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #fff;
        }
        .toolTip-left:before {
            content: '';
            display: block;
            position: absolute;
            left: -20px;
            top: 30px;
            border-top: 20px solid transparent ;
            border-bottom: 20px solid transparent;
            border-right: 20px solid #A5C4EC;
        }
        .toolTip-left:after {
            content: '';
            display: block;
            position: absolute;
            left: -18px;
            top: 30px;
            border-top: 20px solid transparent ;
            border-bottom: 20px solid transparent;
            border-right: 20px solid #fff;
        }

        /* 向右 */
        .toolTip-right {
            position: relative;
            width: 300px;
            height: 100px;
            border: 1px solid #A5C4EC;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #fff;
        }
        .toolTip-right:before {
            content: '';
            display: block;
            position: absolute;
            right: -20px;
            top: 40px;
            border-top: 20px solid transparent ;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #A5C4EC;
        }
        .toolTip-right:after {
            content: '';
            display: block;
            position: absolute;
            right: -18px;
            top: 40px;
            border-top: 20px solid transparent ;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #fff;
        }

    </style>
</head>

<body>
    <div class="wrap">
        <div class="toolTip-bottom"></div>
        <div class="toolTip-top"></div>
        <div class="toolTip-left"></div>
        <div class="toolTip-right"></div>
    </div>
</body>

</html>

效果图如下

效果图

参考

aboutme
github
blog

推荐阅读更多精彩内容

  • CSS实现tooltip效果,主要分为两个方向:1、通过设置box的before伪元素,width、height为...
    Aleph_Zheng阅读 283评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,691评论 1 83
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 4,915评论 0 3
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 451评论 0 6
  • 不知道大家还记得当年的一款很火爆的游戏吗? 传得沸沸扬扬的,就连小映我都决战个几天几夜, 以不过关决不罢休的状态差...
    映视窗阅读 407评论 0 0