css写3角形的提示框

要制作3角形的提示框，我们可以运用CSS中的一些属性来实现。首先，我们可以使用CSS的border属性来定义盒子的边框，通过设置其中一条边的宽度为0，来实现小三角的效果。

    .triangle-Box {
        border: 2px solid #ccc;
        border-top: none; /* 顶部边框不显示 */
        border-right: none; /* 右侧边框不显示 */
        width: 200px;
        height: 100px;
        position: relative; /* 让内部小三角位置为相对于这个盒子进行定位 */
    }
    .triangle-Box::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 8px solid transparent; /* 定义小三角，透明色可以和背景色一致 */
        border-right: 8px solid #ccc;
        border-bottom: 8px solid transparent; /* 定义小三角 */
        position: absolute;
        top: -8px; /* 定位到上方 */
        left: -16px; /* 让左侧的小三角保持外侧的距离 */
    }

上述代码中，我们创建了一个名为triangle-Box的盒子，并设置了border为2px的灰色实线边框，中间的上边框和右边框被设为不显示。同时我们设置了这个盒子的宽度和高度，并将其内部小三角的位置设为相对于这个盒子进行定位。然后我们使用了CSS伪元素:before来创建了一个八字形的小三角，并将其定位到了盒子的上方，并向左移动了一定的距离，让小三角能够外伸以实现3角形的效果。

这样，一个漂亮的3角形提示框就完成了。通过调整border、伪元素和定位属性，我们可以实现各式各样的盒子形状和小三角位置。