现实情况远非想的那么单纯容易清晰：当优越感逐渐转为失落感甚至挫败感时，当由坚信自己是一块金子到怀疑自己是一粒沙子时，愤怒，迷茫，自卑，焦急，躁动就开始与日俱增。
实现效果
实现代码
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>
以上所述是小编给大家介绍的DIV+CSS实现带三角箭头的提示框 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
以上就是DIV+CSS如何实现带三角箭头的提示框。谋人事，成天命！更多关于DIV+CSS如何实现带三角箭头的提示框请关注haodaima.com其它相关文章！
