html+css3实现冒泡对话框

最新推荐文章于 2025-10-03 17:03:18 发布

转载最新推荐文章于 2025-10-03 17:03:18 发布 · 2.6k 阅读

文章标签：

#html+css3

html 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何仅使用CSS创建不同方向的气泡对话框效果，包括顶部、底部、左侧和右侧等变体，所有样式均通过单一HTML元素实现。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           body {
               padding:0;
               margin:0;
               font:1em/1.4 Cambria, Georgia, sans-serif;
               color:#333;
               background:#fff;
               }
               a:link, a:visited {
               border-bottom:1px solid #c55500;
               text-decoration:none;
               color:#c55500;
               }
               a:visited {
               border-bottom:1px solid #730800;
               color:#730800;
               }
               a:hover, a:focus, a:active {
               border:0;
               color:#fff;
               background:#c55500;
               }
               a:visited:hover, a:visited:focus, a:visited:active {
               color:#fff;
               background:#730800;
               }
               h2 {
               margin:0.5em 0 1.5em;
               font-size:1.25em;
               font-weight:normal;
               font-style:italic;
               text-align:center;
               }
               p {
               margin:1em 0;
               }
               .content h2 {
               margin:2em 0 0.75em;
               font-size:2em;
               font-weight:bold;
               font-style:normal;
               text-align:left;
               }
               .content {
               width:500px;
               padding:0 0 50px;
               margin:0 auto;
               position:relative;
               z-index:1;
               }
               .triangle-isosceles {
               position:relative;
               padding:15px;
               margin:1em 0 3em;
               color:#000;
               background:#f3961c;
               background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
               background:-moz-linear-gradient(#f9d835, #f3961c);
               background:-o-linear-gradient(#f9d835, #f3961c);
               background:linear-gradient(#f9d835, #f3961c);
               filter:progid:DXImageTransform.Microsoft.gradient(GradinetType=0, startColorstr="#f9d835", endColorstr="#f3961c");
               -webkit-border-radius:10px;
               -moz-border-radius:10px;
               border-radius:10px;
               }
               .triangle-isosceles.top {
               background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
               background:-moz-linear-gradient(#f3961c, #f9d835);
               background:-o-linear-gradient(#f3961c, #f9d835);
               background:linear-gradient(#f3961c, #f9d835);
               filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f3961c", endColorstr="#f9d835");
               }
               .triangle-isosceles.left {
               margin-left:50px;
               background:#f3961c;
               }
               .triangle-isosceles.right {
               margin-right:50px;
               background:#f3961c;
               }
               .triangle-isosceles:after {
               content:"";
               position:absolute;
               left:50px;
               bottom:-15px;
               border-width:15px 15px 0;
               border-style:solid;
               border-color:#f3961c transparent;
               display:block;
               width:0;
               }
               .triangle-isosceles.top:after {
               top:-15px;
               bottom:auto;
               left:auto;
               right:50px;
               border-width:0 15px 15px;
               border-color:#f3961c transparent;
               }
               .triangle-isosceles.left:after {
               top:16px;
               left:-50px;
               bottom:auto;
               border-width:10px 50px 10px 0;
               border-color:transparent #f3961c;
               }
               .triangle-isosceles.right:after {
               top:16px;
               right:-50px;
               bottom:auto;
               border-width:10px 0 10px 50px;
               border-color:transparent #f39a1c;
               left:auto;
               }
               .triangle-right {
               position:relative;
               padding:15px;
               margin:1em 0 3em;
               color:#fff;
               background:#075698;
               background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
               background:-moz-linear-gradient(#2e88c4, #075698);
               background:-o-linear-gradient(#2e88c4, #075698);
               background:-ms-linear-gradient(#2e88c4, #075698);
               filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#2e88c4", endColorstr="#075698");
               -webkit-border-radius:10px;
               -moz-border-radius:10px;
               border-radius:10px;
               }
               .triangle-right.top {
               background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
               background:-moz-linear-gradient(#075698, #2e88c4);
               background:-o-linear-gradient(#075698, #2e88c4);
               background:linear-gradient(#075698, #2e88c4);
               filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#075698", endColorstr="#2e88c4");
               }
               .triangle-right.left {
               margin-left:40px;
               background:#075698;
               }
               .triangle-right.right {
               margin-right:40px;
               background:#075698;
               }
               .triangle-right:after {
               content:"";
               position:absolute;
               bottom:-20px;
               left:50px;
               border-width:20px 0 0 20px;
               border-style:solid;
               border-color:#075698 transparent;
               display:block;
               width:0;
               height:0;
               }
               .triangle-right.left:after {
               top:16px;
               left:-40px;
               bottom:auto;
               border-width:15px 40px 0 0;
               border-color:transparent #075698;
               }
               .triangle-right.top:after {
               top:-20px;
               right:50px;
               bottom:auto;
               left:auto;
               right:50px;
               border-width:20px 20px 0 0;
               border-color:transparent #075698;
               }
               .triangle-right.right:after {
               top:16px;
               right:-40px;
               bottom:auto;
               left:auto;
               border-width:15px 0 0px 40px;
               border-color:transparent #075698;
               }
       </style>
   </head>
   <body>
       <div class="content">
       <h2>The basic bubble variants</h2>
       <p class="triangle-isosceles">This only needs one HTML element.</p>
       <p class="triangle-isosceles top">For example, <code><p>[text]</p></code>.</p>
       <p class="triangle-isosceles left">But it could be any element you want.</p>
       <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
       <p class="triangle-right">This only needs one HTML element.</p>
       <p class="triangle-right top">For example, <code><p>[text]</p></code>.</p>
       <p class="triangle-right left">But it could be any element you want.</p>
       <p class="triangle-right right">The entire appearance is created only with CSS.</p>
       </div>
   </body>
</html>