css布局实现聊天文字气泡对话效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现聊天文字气泡对话效果代码

代码标签: css 聊天 文字 气泡 对话

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .bubble {
          --r: 25px; /* the radius */
          --t: 30px; /* the size of the tail */
          
          max-width: 300px;
          padding: calc(2*var(--r)/3);
          -webkit-mask: 
            radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
              var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
            conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
              calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0