吹き出し・会話装飾グラフィック

<div class="chat07-08-07">
          <div class="bubble bub1">Hello</div>
          <div class="bubble bub2">OK!</div>
          <div class="bubble bub3 cloud">
            <span class="cloud-dot cd1"></span>
            <span class="cloud-dot cd2"></span>
            <span class="cloud-dot cd3"></span>
          </div>
        </div>

.d07-08-07 .chat07-08-07{
          position:relative;
          width:220px;
          height:180px;
        }
        .d07-08-07 .bubble{
          position:absolute;
          display:flex;
          align-items:center;
          justify-content:center;
          font-family:sans-serif;
          font-size:14px;
          color:#fff;
        }
        .d07-08-07 .bub1{
          top:10px;
          left:6px;
          width:110px;
          height:56px;
          background:#2563eb;
          border-radius:16px 16px 16px 2px;
        }
        .d07-08-07 .bub2{
          top:86px;
          right:4px;
          width:80px;
          height:48px;
          background:#f59e0b;
          border-radius:16px 16px 2px 16px;
        }
        .d07-08-07 .bub3{
          bottom:2px;
          left:24px;
          width:96px;
          height:46px;
          background:#10b981;
          border-radius:20px;
        }
        .d07-08-07 .cloud-dot{
          position:absolute;
          background:#10b981;
          border-radius:50%;
        }
        .d07-08-07 .cd1{
          width:14px;
          height:14px;
          bottom:-8px;
          left:18px;
        }
        .d07-08-07 .cd2{
          width:9px;
          height:9px;
          bottom:-16px;
          left:10px;
        }
        .d07-08-07 .cd3{
          width:6px;
          height:6px;
          bottom:-20px;
          left:5px;
        }