CSS3 - 实现带有小三角形的消息提示框教程（上下左右各方向）

作者：hangge | 2024-04-29 08:45

当需要在网页中添加提示信息时，带有三角形的提示框是一种常见的设计元素。这种提示框通常用于突出显示重要信息或提供用户操作的指导。本文我将演示如何使用 CSS 来实现带有三角形的提示框。

1，效果图

在普通的矩形消息框的基础上，左侧会显示一个小三角形。

2，实现代码

我们通过使用伪元素 ::before 和 ::after，以及调整它们的位置和样式，实现了在消息框左侧显示一个小三角形的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hangge.com</title>
    <style>
      /* 消息框样式 */
      .message-container {
        width: 260px;
        margin: 20px;
        padding: 10px;
        border-style: solid;
        border-width: 1px;
        border-radius: 0.125rem;
        border-color: rgb(154, 223, 223);
        background-color: white;
        filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 1px 2px)
         drop-shadow(rgba(0, 0, 0, 0.06) 0px 1px 1px)
      }

      /* 通过消息框伪元素 ::before 和 ::after 实现三角样式定义 */
      .message-container::before, .message-container::after {
          content: "";
          position: absolute;
          top: 50%; /* 设置三角在垂直方向上居中 */
          border-width: 7px;
          border-style: solid;
          transform: translateY(-50%);
      }

      /* 消息框伪元素 ::before 设置底部三角颜色为绿色 */
      .message-container::before {
          left: -14px;
          border-color: transparent #9ADFDF transparent transparent;
      }

      /* 消息框伪元素 ::after 设置上层三角颜色为白色 */
      .message-container::after {
          left: -13px; /* 与上面的left值相差1px，实现绿色边框效果 */
          border-color: transparent white transparent transparent;
      }
    </style>
</head>
<body>
    <div class="message-container">
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com
    </div>
</body>
</html>

附：其他位置和方向的三角形

1，上边框三角形

/* 通过消息框伪元素 ::before 和 ::after 实现三角样式定义 */
.message-container::before, .message-container::after {
    content: "";
    position: absolute;
    left: 50%; /* 设置三角在水平方向上居中 */
    border-width: 7px;
    border-style: solid;
    transform: translateX(-50%) rotate(90deg);
}

/* 消息框伪元素 ::before 设置底部三角颜色为绿色 */
.message-container::before {
    top: -14px;
    border-color: transparent #9ADFDF transparent transparent;
}

/* 消息框伪元素 ::after 设置上层三角颜色为白色 */
.message-container::after {
    top: -13px; /* 与上面的top值相差1px，实现绿色边框效果 */
    border-color: transparent white transparent transparent;
}

2，下边框三角形

/* 通过消息框伪元素 ::before 和 ::after 实现三角样式定义 */
.message-container::before, .message-container::after {
    content: "";
    position: absolute;
    left: 50%; /* 设置三角在水平方向上居中 */
    border-width: 7px;
    border-style: solid;
    transform: translateX(-50%) rotate(270deg);
}

/* 消息框伪元素 ::before 设置底部三角颜色为绿色 */
.message-container::before {
    top: 100%;
    border-color: transparent #9ADFDF transparent transparent;
}

/* 消息框伪元素 ::after 设置上层三角颜色为白色 */
.message-container::after {
    top: calc(100% - 1px); /* 与上面的top值相差1px，实现绿色边框效果 */
    border-color: transparent white transparent transparent;
}

3，右边框三角形

/* 通过消息框伪元素 ::before 和 ::after 实现三角样式定义 */
.message-container::before, .message-container::after {
    content: "";
    position: absolute;
    top: 50%; /* 设置三角在垂直方向上居中 */
    border-width: 7px;
    border-style: solid;
    transform: translateY(-50%) rotate(180deg);
}

/* 消息框伪元素 ::before 设置底部三角颜色为绿色 */
.message-container::before {
    right: -14px;
    border-color: transparent #9ADFDF transparent transparent;
}

/* 消息框伪元素 ::after 设置上层三角颜色为白色 */
.message-container::after {
    right: -13px; /* 与上面的left值相差1px，实现绿色边框效果 */
    border-color: transparent white transparent transparent;
}

HTML5 / CSS3