CSS 提示工具(Tooltip) 与 CSS绘制三角形和箭头

CSS 提示工具(Tooltip)

<div>
    <div class="cssTooltip">CSS 提示工具(Tooltip)
        <span class="tooltiptext">Tooltip</span>
    </div>
</div>

<style scoped lang="scss">
.cssTooltip {
    cursor: pointer;
    position: fixed;
}
.cssTooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltiptext {
    cursor: auto;
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: -33px;
    left: 50%;
    margin-left: -60px;
}
// 添加箭头
// 在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。
// 注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。
// border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。
.tooltiptext::after{
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
</style>

CSS绘制三角形和箭头

<div class="flex">
    <div class="triangle triangle-all"></div>
    <div class="triangle triangle-top"></div>
    <div class="triangle triangle-right"></div>
    <div class="triangle triangle-bottom"></div>
    <div class="triangle triangle-left"></div>
</div>

<style scoped lang="scss">
.flex{
    display: flex;
}
.triangle {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
}
.triangle-all {
    border-color: pink wheat beige #c62be285;
}
.triangle-top {
    border-color: pink transparent transparent transparent;
}
.triangle-right {
    border-color: transparent wheat transparent transparent;
}
.triangle-bottom {
    border-color: transparent transparent beige transparent;
}
.triangle-left {
    border-color: transparent transparent transparent #c62be285;
}
</style>