问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么用css 实现这个形状？

头像
小江
    14511

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

    1

    前端csscss3html5
    阅读 347
    1 个回答
    得票最新
    头像
    乔治
      12.8k1329

      image.png

      <!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>

      image.png

      <!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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏