使用HTML和CSS代码制作带有尖角的气泡对话框

第一种方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style type="text/css">
    .dialog_Box{
      text-align: center;
    }
    .dialog{
      /* 制作圆角对话框 */
      border: solid 2px;
      border-radius: 6px;
      padding: 25px;
      display: inline-block;
      position: absolute;
      font-size: 1.5em;
      color: cornflowerblue;
      float: right;
      width: 192px;

    }
    /* 制作尖角原理：把容器的长和宽都设置为零，然后利用其border制作小三角，两个三角形重叠，一个与背景颜色相同，另一个与边框颜色相同，即可展示出尖角的效果 */
    .dialog:before{
        content: "";
        width: 0;
        height: 0;
        border-top:32px solid #fff;
        border-right: 50px solid;
        margin-left: -89px;
        margin-top: 26px;
        position: absolute;
        top: 20px;
    }
    .dialog:after{
        content: "";
        position: absolute;
        top: 41px;
        bottom: 90px;
        left: -40px;
        border-top: 34px solid transparent;
        border-right: 48px solid #fff;
        border-bottom: 0 solid transparent;
    }
    </style>
    </head>
    <body>
    <div class="dialog_Box">
        <span class="dialog">我要一个富萝莉</span>
    </div>
    </body>
</html>

 

 

第二种方式

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style type="text/css">
    .dialog_Box{
      text-align: center;
    }
    .dialog{
      /* 制作圆角对话框 */
      border:cornflowerblue solid 2px;
      border-radius: 6px;
      padding: 25px;
      display: inline-block;
      position: absolute;
      font-size: 15px;
      background-color: cornflowerblue;
      color: #fff;
      float: right;
      width: 192px;
    }
    /* 制作尖角原理：把容器的长和宽都设置为零，然后利用其border制作小三角，两个三角形重叠，一个与背景颜色相同，另一个与边框颜色相同，即可展示出尖角的效果 */
    /* .dialog:after{
      content: "";
      position: absolute;
      border:10px  solid transparent;
      border-top-color:cornflowerblue;
      top:72px;
      left:20px;
    } */
    .dialog:before{
      content: "";
      position: absolute;
      border:20px solid transparent;
      border-top-color:cornflowerblue;
      top:72px;
      left:30px;
    }
    </style>
    </head>
    <body>
    <div class="dialog_Box">
        <span class="dialog">我要一个富萝莉</span>
    </div>
    </body>
</html>

 

posted @ 2022-04-08 15:34  yz_043  阅读(912)  评论(0)    收藏  举报