对于带边框的对话框我们一般我们用border属性生成两侧线框,然后CSS3 transform旋转,今天我们来使用渐变来实现
先上代码:
<div class="content"> <p class="talk">这是对话内容</p> </div> <style> .avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; float: left; } .content { margin-left: 70px; } .talk { display: inline-block; max-width: 80%; border: 1px solid #ddd; border-radius: 3px; padding: 6px 10px; font-size: 14px; background-color: #fff; position: relative; } .talk::before { content: ''; position: absolute; width: 6px; height: 6px; background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat; background-size: 6px 1px, 1px 6px, 6px 6px; transform: rotate(-45deg); left: -4px; top: 13px; } </style>
效果如下:
这是对话内容
评论前必须登录!
注册