DIV+CSS如何实现带三角箭头的提示框

发布时间：2023-06-02 13:58:37 来源：网络

.

现实情况远非想的那么单纯容易清晰：当优越感逐渐转为失落感甚至挫败感时，当由坚信自己是一块金子到怀疑自己是一粒沙子时，愤怒，迷茫，自卑，焦急，躁动就开始与日俱增。

实现效果

实现代码

CSS Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<linkrel="shortcuticon"rel="nofollow noopener noreferrer" href="resources/img/logo-color.png"type="image/x-icon">
<title>测试</title>
<style>
.out-div{
color:#FFFFFF;
font-size:16px;
line-height:40px;
display:inline-block;
height:40px;
width:200px;
text-align:center;
border-radius:5px;
margin-left:32px;
vertical-align:top;
background-color:maroon;
}
.arrow{
width:0px;
height:0px;
border-top:10pxsolidtransparent;
border-right:10pxsolid;
border-bottom:10pxsolidtransparent;
position:absolute;
margin-left:-10px;
margin-top:10px;
border-right-color:maroon;
}
</style>
</head>
<body>
<divclass="out-div">
<divclass="arrow"></div>
<span>这是一个提示框</span>
</div>
</body>
</html>