问答博客资讯标签用户活动
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 实现聊天气泡

头像
rain2010
    15433241

    clipboard.png

    如上图所示这样的图形，那个小三角位置在圆弧上，这样的样式能够通过纯css实现吗？

    小三角的实现我明白，但是如何定位到圆弧上 ，这才是不明白的地方

    html5htmlcss3css
    阅读 6.6k
    5 个回答
    得票最新
    头像
    daisy2016
      313

      应该可以，用before伪类，三角形可以巧妙地使用border

      头像
      夜影
        1.5k21936
        头像
        JolieJY
          83

          定位，父元素relation

          /*before也可以，看你自己*/
div::after{
  content: '';
  position: absolute;
  /*写border, top, left等*/
}

          你估计还要旋转下三角形，具体代码我忘了，你查一下transform

          头像
          PFinal南丞_
            50719
            <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div{
            width: 250px;border:1px solid orange;height: 40px;
            margin-left:50px;
            border-radius:20px;
            position: absolute;
            z-index: 10;
        }
        #box{
            width: 18px;
            border-top: 1px solid orange;
            height: 10px;
            margin-top: 20px;
            transform: rotate(-49deg);
            margin-left: -11px;
            background: #ffffff;
            position: relative;
            z-index:-11;

        }
        #box1{
            width:15px;border-top:1px solid orange;
            height:20px;margin-top:-1px;
            transform:rotate(7deg);
            margin-left: -13px;
            position: relative;
            z-index:-10;
        }
    </style>
</head>
<body>
<div id="div">
    <div id="box"></div>
    <div id="box1"></div>
</div>
</body>
</html>
            头像
            孤月
              2.9k1314

              可以，调整定位就行了

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