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

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

代码语言：html

代码描述：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, 
            radial-gradient(50% 50%,#000 98%,#0000 101%) 
              0 0/var(--r) var(--r) space padding-box;
          background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
          color: #fff;
        }
        .left {
          --_d: 0%;
          border-left: var(--t) solid #0000;
          margin-right:.........完整代码请登录后点击上方下载按钮下载查看