css3箭头弹出框 |css div满屏

首先，大家需要用到CSS3的:hover伪类和:before伪元素来实现箭头效果。代码如下：

.box {
 position: relative;
 display: inline-block;
}
.box:hover:before {
 content: "";
 position: absolute;
 top: -10px;
 left: 50%;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #333333;
}
.box:hover .pop {
 display: block;
 position: absolute;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 padding: 10px;
 background-color: #333333;
 color: #ffffff;
}

上述代码中，.box表示弹出框的外层容器，.pop表示弹出框内容的部分。当鼠标悬停在.box上，.:before伪元素就会在.box上方生成一个三角箭头，同时.pop会显示出来。其中，.:before的样式设置了宽高和边框，可以实现三角形的形状，同时通过top和left定位到.box上方的居中位置。

接下来，大家来看一下HTML代码如何编写：

<div class="box">
Hover me!
<div class="pop">
This is the content of pop-up box.
</div>
 </div>

HTML代码非常简单，就是一个.box包裹住弹出框的内容。当大家将以上HTML和CSS代码应用到网页中，就可以得到一个简单的CSS3箭头弹出框。

这样，大家就可以通过CSS3实现箭头弹出框的交互效果了。这种效果可以让页面UI更加丰富，增加用户体验，增强页面交互可玩性。