div设置边角小三角形

最新推荐文章于 2024-06-02 20:20:55 发布

飞流银河

最新推荐文章于 2024-06-02 20:20:55 发布

阅读量584

点赞数

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_40444253/article/details/132499512

版权

前端专栏收录该内容

58 篇文章

订阅专栏

<div class="leftmsg"/>
          
<div class="rightmsg"/>   

<style>
         .leftmsg{
            padding:5px 5px 5px 5px;
            margin-top: 5px;
            margin-left: 60px;
            // float:left;
            background-color: #4c7ef3;
            width:60%;
            border-radius: 5px;
            margin-bottom: 5px;

            position: relative;
          }
          .leftmsg:before{
            content:'';
            position: absolute;
            left:-10px;
            top:24px;
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-right: 10px solid #ccc;
          }



          .rightmsg{
            padding:5px 5px 5px 5px;
            margin-top:5px;
            text-align: left;
            width:60%;
            background-color: #95b3f3;
            float:right;
            margin-right: 20px;
            border-radius: 5px;
            margin-bottom: 5px;
            position: relative;
          }
          .rightmsg:before{
            content:'';
            position: absolute;
            right:-10px;
            top:24px;
            border-top: 6px solid transparent;
            border-bottom:  6px solid transparent;
            border-left: 10px solid #ccc;
          }
</style>