CSS3-对话框图形

最新推荐文章于 2024-08-03 22:01:17 发布

AsaZyf

最新推荐文章于 2024-08-03 22:01:17 发布

阅读量448

点赞数

文章标签： css3 对话框 after before 小三角

本文链接：https://blog.csdn.net/AsaZyf/article/details/82974496

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>after和before生成小三角</title>
       <style>
           body{
               /*background: #000000;*/
           }
           .tooltips{
               width: 120px;
               height: 40px;
               background: #fbfbfb;
               border: 1px solid #ddd;
               border-radius: 5px;
               position: relative;
           }
           .tooltips:before{
               position:absolute;
               width: 0;
               height: 0;
               border-bottom: 9px solid transparent;
               border-right: 9px solid transparent;
               border-top: 9px solid transparent;
               border-left: 9px solid #d5d5d5;
               right: -19px;
               top: 10px;
               content: "";
           }
           .tooltips:after{
               position:absolute;
               width: 0;
               height: 0;
               border-bottom: 9px solid transparent;
               border-right: 9px solid transparent;
               border-top: 9px solid transparent;
               border-left: 9px solid #fbfbfb;
               right: -18px;
               top: 10px;
               content: "";
           }
       </style>
   </head>
   <body style="margin: 200px;">
       <div class="tooltips">

       </div>
   </body>
</html>

AsaZyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-对话框图形

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;after和before生成小三角&lt;/title&gt; &lt;style&gt; body{
复制链接

扫一扫

专栏目录