<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
padding: 30px;
}
/* 消息提示框1-start */
#comment_bubble {
width: max-content;
height: auto;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
padding: 15px;
max-width: 200px;
color: #fff;
}
#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 30%;
position: absolute;
border-top: 10px solid transparent;
border-right: 13px solid #088cb7;
border-bottom: 10px solid transparent;
}
/* 消息提示框1-end */
/* 消息提示框2-start */
.tip_box {
position: relative;
display: inline-block;
}
.tip_box .tip_text {
position: absolute;
left: -50%;
top: calc(100% + 12px);
width: max-content;
font-size: 12px;
font-weight: 400;
word-break: break-word;
padding: 6px 8px;
border-radius: 4px;
z-index: 99999;
background: #fff;
border: 1px solid #303133;
color: #303133;
}
.tip_box .tip_text:before {
content: "";
position: absolute;
top: -7px;
left: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px;
border-color: transparent transparent #fff;
z-index: 1;
}
.tip_box .tip_text:after {
content: "";
position: absolute;
top: -8px;
left: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px;
border-color: transparent transparent #303133;
}
/* 消息提示框2-end */
</style>
</head>
<body>
<div class="container">
<!-- 消息提示框1 -->
<h3>第一种消息提示框的效果如下:</h3>
<div id="comment_bubble">消息提示框内容:消息提示框内容消息提示框内容消息提示框内容消息提示框内容</div>
<!-- 消息提示框2 -->
<h3>第二种消息提示框的效果如下:</h3>
<div class="tip_box">
<div class="tip_text">消息提示框内容:消息提示框内容</div>
</div>
</div>
</body>
</html>
实现效果:
利用css实现其他形状:
参考链接:https://www.cnblogs.com/liangxiaofeng/p/5936760.html