添加箭头

 

    我们可以用CSS伪元素::after及content属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

 

    以下实例演示了如何为显示在顶部的提示工具添加底部箭头：

 

    顶部提示框/底部箭头：

 

.tooltip .tooltiptext::after {

 

    content: " ";

 

    position: absolute;

 

    top: 100%; /* 提示工具底部 */

 

    left: 50%;

 

    margin-left: -5px;

 

    border-width: 5px;

 

    border-style: solid;

 

    border-color: black transparent transparent transparent;

 

}

 

    实例解析

 

    在提示工具内定位箭头:top:100%,箭头将显示在提示工具的底部。left:50%用于居中对齐箭头。

 

    注意：border-width属性指定了箭头的大小。如果你修改它，也要修改margin-left值。这样箭头在能居中显示。

 

    border-color用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

 

    以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：

 

    底部提示框/顶部箭头：

 

.tooltip .tooltiptext::after {

 

    content: " ";

 

    position: absolute;

 

    bottom: 100%;  /* 提示工具头部 */

 

    left: 50%;

 

    margin-left: -5px;

 

    border-width: 5px;

 

    border-style: solid;

 

    border-color: transparent transparent black transparent;

 

}

 

    以下两个实例是左右两边的箭头实例：

 

    右侧提示框/左侧箭头：

 

.tooltip .tooltiptext::after {

 

    content: " ";

 

    position: absolute;

 

    top: 50%;

 

    right: 100%; /* 提示工具左侧 */

 

    margin-top: -5px;

 

    border-width: 5px;

 

    border-style: solid;

 

    border-color: transparent black transparent transparent;

 

}

 

    左侧提示框/右侧箭头：

 

.tooltip .tooltiptext::after {

 

    content: " ";

 

    position: absolute;

 

    top: 50%;

 

    left: 100%; /* 提示工具右侧 */

 

    margin-top: -5px;

 

    border-width: 5px;

 

    border-style: solid;

 

    border-color: transparent transparent transparent black;

 

}