怎么用css实现这个图形，长度跟随里面的文字变化，左右的两个角带有一点弧度？ 1

怎么用css 实现这个形状？

.tooltip { color: #fff; font-size: 18px; max-width: 28ch; text-align: center; } .tooltip { --s: 1.5em; /* triangle size */ --r: 1em; /* the radius */ padding: 1em; border: var(--s) solid #0000; border-radius: calc(var(--r) + var(--s)); border-bottom-left-radius: 0; border-top-right-radius: 0; background: border-box linear-gradient(60deg,#CC333F,#4ECDC4); /* the coloration */ -webkit-mask: radial-gradient(100% 100% at 100% 100%,#0000 99%,#000 102%) var(--s) 100%/var(--s) var(--s) no-repeat border-box, radial-gradient(100% 100% at 0 0,#0000 99%,#000 102%) calc(100% - var(--s)) 0/var(--s) var(--s) no-repeat border-box, linear-gradient(#000 0 0) padding-box; }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS气泡形状</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        
        .bubble {
            background-color: #ffeb3b;
            padding: 10px 20px;
            border-radius: 20px;
            display: inline-block;
            max-width: 80%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
   
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="bubble">这是一条短消息</div>
        <div class="bubble">这是一条较长的消息，可以看到气泡会自动根据内容调整宽度</div>
        <div class="bubble">这是一条非常非常长的消息，当内容超过一定宽度时，气泡会自动换行，保持良好的视觉效果和阅读体验</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS气泡形状 - 精确版</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        
        .bubble {
            background-color: #ffeb3b;
            padding: 8px 15px;
            display: inline-block;
            position: relative;
            border-radius: 6px;
            margin: 10px;
        }
        
        .bubble::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 15px;
            height: 15px;
            background-color: #ffeb3b;
            border-bottom-left-radius: 15px;
            clip-path: polygon(0 0, 100% 100%, 0 100%);
            transform: translateX(-8px);
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="bubble">1</div>
        <div class="bubble">这是一条短消息</div>
        <div class="bubble">这是一条较长的消息示例</div>
        <div class="bubble">这是一条非常长的消息，可以看到气泡会自动调整大小</div>
    </div>
</body>
</html>

怎么用css 实现这个形状？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？