css3 border制作的聊天框

最新推荐文章于 2024-06-15 21:29:25 发布

黄治文个人博客

最新推荐文章于 2024-06-15 21:29:25 发布

阅读量650

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_34690340/article/details/80583454

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

话不多说先上效果图

主要也就是左右小三角比较麻烦一点，实现小三角用的是css3里的border将其他三个边的border颜色设为透明

先用border画一个小三角吧,把其他三个边的颜色设为透明transparent

 正方形：.square{
        display: inline-block;
        background-color: #00d1b2;
        border:solid 20px;
        border-color:#f00 #F8C301 #0f0  #000 ;
    }

三角形：.square{
        display: inline-block;
        border:solid 20px;
        border-color: transparent transparent transparent #000;
    }

画出三角形之后就是直接做这个对话框，在一个div里直接的左右拼一个三角形，先做一个div吧！

.duihu{
        margin-top: 10px;
        display: inline-block;
        padding: 5px;
        position:relative;
        min-width: 0;
        max-width:250px ;
        min-height:22px;
        line-height: 22px;
        background:#F8C301;
        color: #555;
        border-radius:5px; 
    }

<div class="duihu">
    文件安徽省暗杀计划的看见爱上打算尽快a
</div>

在左边拼上一个三角形

.duihu::before{
        content: "";
        position:absolute;
        top:5px;
        left:-16px;
        width:0;
        height:0;
        font-size:0;
        border:solid 8px;
        border-color:transparent #F8C301 transparent transparent ;
    }

基本这样也就完成了对话框的基本样式，为了分左右还是给div再加一个class：left 和right区分拼到左边还是右边

.right{
          margin-right: 8px;
          float: right;
      }
      .left{
          margin-left: 8px;
      }
    .right::after{
        content: "";
        position:absolute;
        top:5px;
        right:-16px; /* 圆角的位置需要细心调试哦 */
        width:0;
        height:0;
        font-size:0;
        border:solid 8px;
        border-color:transparent transparent transparent #F8C301;
    }
   
    .left::before{
        content: "";
        position:absolute;
        top:5px;
        left:-16px;
        width:0;
        height:0;
        font-size:0;
        border:solid 8px;
        border-color:transparent #F8C301 transparent transparent ;
    }
  .clear{
      clear: both;
  }

<div class="duihu left">
    文件安徽省暗杀计划的看见爱上打算尽快a
</div>
<div class="clear"></div>
<div class="duihu right">
    文件安徽省阿加莎按揭公司盎司看见啊
</div>

这样也就全部文成了，给加一个框让左右的内容像聊天页面似的左右展开全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
      .main{
          margin: 30px auto;
          width: 375px;
          height: 750px;
          border:solid 1px #eee;
      }
    .duihu{
        margin-left: 20px;
        margin-top: 10px;
        display: inline-block;
        padding: 5px;
        position:relative;
        min-width: 0;
        max-width:250px ;
        min-height:22px;
        line-height: 22px;
        background:#F8C301;
        color: #555;
        border-radius:5px;
    }
     .right{
          margin-right: 8px;
          float: right;
      }
      .left{
          margin-left: 8px;
      }
    .right::after{
        content: "";
        position:absolute;
        top:5px;
        right:-16px;
        width:0;
        height:0;
        font-size:0;
        border:solid 8px;
        border-color:transparent transparent transparent #F8C301;
    }

    .left::before{
        content: "";
        position:absolute;
        top:5px;
        left:-16px;
        width:0;
        height:0;
        font-size:0;
        border:solid 8px;
        border-color:transparent #F8C301 transparent transparent ;
    }
  .clear{
      clear: both;
  }

</style>

<body>
<div class="main">
    <div class="duihu right">
        文件安徽省暗杀计划的看见爱上打算尽快a
    </div>
    <div class="clear"></div>
    <div class="duihu left">
        文件安徽省阿加莎按揭公司盎司看见啊
    </div>
    <div class="clear"></div>
    <div class="duihu left">
        文件
    </div>
    <div class="clear"></div>
    <div class="duihu left">
            文件123
    </div>
    <div class="clear"></div>
    <div class="duihu right">
        文件安徽省暗杀计划的看见爱上打算尽快按时间打击卡技术大咖极速代码，安师大，十大科技收到啊科技时代按时
    </div>
</div>

</body>
</html>

黄治文个人博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 border制作的聊天框

话不多说先上效果图主要也就是左右小三角比较麻烦一点，实现小三角用的是css3里的border将其他三个边的border颜色设为透明先用border画一个小三角吧,把其他三个边的颜色设为透明transparent 正方形：.square{ display: inline-block; background-color: #00d1b2; border:...
复制链接

扫一扫

专栏目录