css实现toolTip

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设置为透明色就可以了
这样就实现了三角形

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

效果图如下

效果图

参考

• CSS实现空心三角指示箭头