css怎么做箭头框

CSS中实现箭头框可以通过伪类：before和:after来实现。可以通过以下代码实现：

.arrow-box {
        position: relative;
        border: 1px solid #ccc;
        padding: 20px;
}
.arrow-box:before {
        content: '';
        display: block;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -10px;
        border: 10px solid transparent;
        border-bottom-color: #ccc;
}
.arrow-box:after {
        content: '';
        display: block;
        position: absolute;
        bottom: -20px;
        left: 50%;
        margin-left: -10px;
        border: 10px solid transparent;
        border-top-color: #ccc;
}

其中，arrow-box是包含箭头框的容器，通过设置position:relative来控制伪类的位置。在:before伪类中设置content属性为空，使伪类显示，然后通过position:absolute属性控制伪类的位置，并设置top、left属性来保证伪类在容器上面居中显示，使箭头框看起来像三角形的下部分。 在:after伪类中同样设置content属性为空，使伪类显示，并通过position:absolute属性控制伪类的位置，并设置bottom、left属性来保证伪类在容器下面居中显示，使箭头框看起来像三角形的上部分。

最终效果如图所示：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！