css3内向倒三角的实现图片更直观

图片描述

如图，正常的气泡，三角不管是用传统方法实现还是，css都表容易实现，但是这个三角效果，怎么才能实现呢，求教
如果用canvas画图的话，有点浪费，纯css3是否有实现方案呢
我的思路是方形旋转45°，两边不透明

阅读 2.7k

简单的一个思路，可以参考一下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .a {
      margin: 100px auto;
      width: 200px;
      position: relative;
      border-bottom: 1px solid #333;
    }
    .a:after {
      position: absolute;
      top: -5px;
      left: 50%;
      margin-left: -5px;
      content: '';
      transform: rotate(45deg);
      border-top: 1px solid #333;
      border-left: 1px solid #333;
      height: 10px;
      width: 10px;
      background: #fff;
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>

效果图：

css3内向倒三角的实现图片更直观

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何在CSS中实现滚动条不溢出圆角框？

css如何设置纵向滚动条的高度？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？