DIV+CSS实现带三角箭头的提示框
导读:收集整理的这篇文章主要介绍了DIV+CSS实现带三角箭头的提示框 ,觉得挺不错的,现在分享给大家,也给大家做个参考。 实现效果实现代码CSS Code复制内容到剪贴板 <!DOCTYPE htML> ...
收集整理的这篇文章主要介绍了DIV+CSS实现带三角箭头的提示框 ,觉得挺不错的,现在分享给大家,也给大家做个参考。 实现效果
实现代码
CSS Code复制内容到剪贴板- !DOCTYPE htML>
- html>
- head>
- meta charset="UTF-8">
- link rel="shortcut icon" 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: 10px solid transparent;
- border-right: 10px solid;
- border-bottom: 10px solid transparent;
- position: absolute;
- margin-left: -10px;
- margin-top: 10px;
- border-right-color: maroon;
- }
- /style>
- /head>
- body>
- div class="out-div">
- div class="arrow" > /div>
- span> 这是一个提示框/span>
- /div>
- /body>
- /html>
以上所述是小编给大家介绍的DIV+CSS实现带三角箭头的提示框 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: DIV+CSS实现带三角箭头的提示框
本文地址: https://pptw.com/jishu/584757.html