css写提示框（带小三角样式的）

最新推荐文章于 2024-08-21 11:59:03 发布

zhang-php

最新推荐文章于 2024-08-21 11:59:03 发布

阅读量4.5k

点赞数 1

分类专栏： CSS html5

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_37682202/article/details/86140581

版权

html5 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

第一种写法：

<style type="text/css">
/**样式**/
.tooltip-boxs{ margin-top: 10px; width:180px; background: #666; border-radius: 8px; text-align:center; padding: 15px 1px; }
.tooltip-boxs:after{ content:""; width: 0; height: 0; border-style:solid; border-width:10px; border-color:#666 transparent transparent transparent; position: fixed; margin-top: 15px; margin-left: -10px; }
</style>

<!--html代码-->
<div class="tooltip-boxs">我是提示框！</div>

效果图如下：

第二种写法：

<style type="text/css">
    /**css样式**/ 
    .tooltip-boxs{ margin-top: 10px; width:180px; height:35px; background: #666; border- radius: 8px; text-align:center; padding: 15px 1px 0px 1px; }
    .tooltip-triangle{ width: 0; height: 0; border-style:solid; border-width:10px; border-color:#666 transparent transparent transparent; margin: 14px auto 0 auto; } 
</style>

<!--html代码-->
<div class="tooltip-boxs"> 
    <div class="tooltip-tittle">我是提示框！</div>
    <div class="tooltip-triangle"></div>
</div>

效果图如下：