下面是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技术站
微信扫一扫 
支付宝扫一扫 