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; }
全部评论(0)