CSS实现带箭头的DIV(鼠标放上显示提示框)

下面是CSS实现带箭头的DIV的完整攻略：

1. CSS绘制箭头

首先我们需要用CSS来绘制箭头，这里提供两种方法：

方法一：利用伪元素和边框实现

通过给DIV添加四个边框和一个伪元素，同时利用边框的特性，通过指定某一边的边框为透明，其他边框不透明，来绘制出箭头的效果。

示例代码如下：

.arrow {
    position: relative;
    padding: 10px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 2px solid #333;
}

.arrow::after {
    content: "";
    position: absolute;
    top: -7.07px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 7.07px solid transparent;
    border-left: 7.07px solid transparent;
    border-right: 7.07px solid transparent;
    border-bottom: 7.07px solid #333;
}

方法二：利用transform和rotate实现

通过利用CSS3的transform属性和rotate函数，在DIV中添加一个嵌套的箭头元素，并配合灵活的调整，来实现箭头的绘制。

同时需要注意的是，此方法需要将箭头内部的元素绝对定位，否则无法绘制出箭头效果。

示例代码如下：

.arrow {
    position: relative;
    padding: 20px;
    border: 2px solid #333;
}

.arrow::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border-top: 2px solid #333;
    border-left: 2px solid #333;
}

.arrow span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

2. 鼠标放上显示提示框

当鼠标放上DIV时，我们需要显示一个提示框。这里可以通过利用CSS的:hover伪类和display属性来实现。

示例代码如下：

.arrow {
    /* 箭头绘制代码 */
    position: relative;
    padding: 10px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 2px solid #333;

    /* 提示框样式 */
    background-color: #fff;
    box-shadow: 1px 1px 6px #333;
    display: none;
    position: absolute;
    top: 25px;
    left: -10px;
    z-index: 1;
    padding: 10px;
}

.arrow:hover {
    cursor: pointer;
}

.arrow:hover .tips {
    display: block;
}

在示例代码中，我们通过添加一个.tip类来实现鼠标放上DIV时显示的提示框。同时，我们将提示框设置为绝对定位，利用z-index属性来显示在DIV上方，最后再通过:hover伪类来控制它的显示与隐藏。

3. 完整示例

下面是一个完整的示例代码，其中包含两个带箭头的DIV，并且当鼠标放上DIV时，会显示提示框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现带箭头的DIV</title>
    <style>
        .arrow {
            position: relative;
            padding: 10px;
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            border-right: 1px solid #333;
            border-bottom: 2px solid #333;
            background-color: #fff;
            margin: 20px 0;
        }

        .arrow::after {
            content: "";
            position: absolute;
            top: -7.07px;
            left: 0;
            width: 0;
            height: 0;
            border-top: 7.07px solid transparent;
            border-left: 7.07px solid transparent;
            border-right: 7.07px solid transparent;
            border-bottom: 7.07px solid #333;
        }

        .arrow2 {
            position: relative;
            padding: 20px;
            border: 2px solid #333;
            background-color: #fff;
            margin: 20px 0;
        }

        .arrow2::before {
            content: "";
            display: block;
            position: absolute;
            top: -10px;
            left: 50%;
            width: 20px;
            height: 20px;
            transform: rotate(45deg);
            border-top: 2px solid #333;
            border-left: 2px solid #333;
        }

        .arrow2 span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .tips {
            background-color: #fff;
            box-shadow: 1px 1px 6px #333;
            display: none;
            position: absolute;
            top: 25px;
            left: -10px;
            z-index: 1;
            padding: 10px;
            width: 150px;
        }

        .arrow:hover, .arrow2:hover {
            cursor: pointer;
        }

        .arrow:hover .tips, .arrow2:hover .tips {
            display: block;
        }
    </style>
</head>
<body>
    <div class="arrow">
        <div class="tips">这是箭头的提示框</div>
        这是一个带箭头的DIV
    </div>
    <div class="arrow2">
        <div class="tips">这是另一个箭头的提示框</div>
        <span>带文字的箭头</span>
    </div>
</body>
</html>

希望这个攻略能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS实现带箭头的DIV(鼠标放上显示提示框) - Python技术站