纯 CSS 实现带小箭头的评论框

要实现文章底部显示评论记录的功能，需求样式大致如下：

首先我们 UI 组件库使用的是 Element UI ，这里我们直接能想到用 Timeline 时间线组件就能满足要求，个别地方只需稍微改点样式代码就行了。

<el-timeline>
  <el-timeline-item
    :timestamp="dayjs(item.createdDate).format('YYYY-MM-DD HH:mm')"
    placement="top"
  >
    <el-card
      shadow="never"
      class="comment"
      :body-style="{ padding: '10px' }"
    >
      <div class="top">
        <span class="name">{{ comment.createdBy }}</span>
        <el-rate :max="10" :model-value="item.Score" disabled />
      </div>
      <div class="content">{{ comment.content}}</div>
    </el-card>
  </el-timeline-item>
</el-timeline>

我们这里不看其它无关的代码，直接看评论框，使用的是 card 组件，这里的内容区域的父元素是 class 为 el-card__body 的 DIV，我们只需要针对这个类写些样式就可以。

<style lang="scss" scoped>
:deep(.el-card__body) {
 position: relative;

 &::before {
   content: "";
   position: absolute;
   top: 20px;
   left: -6px;
   width: 10px;
   height: 10px;
   background: #fff;
   border-color: #e4e7ed;
   border-style: solid;
   border-width: 1px 0 0 1px;
   transform: rotate(-45deg);
 }
}
</style>

这里实现的方式是通过伪选择器 ::before 设置长宽和边框，进行 45 度旋转，然后相对于父元素进行绝对定位。

当我们打开开发者工具在元素项中把鼠标放到对应的元素上时，可以看到实际目标的区域。由于对 el-card__body 元素设置了 padding 值，这个箭头区域并不会遮住评论框里的内容。

但如果我们一定要去除这个遮挡部分，还有其它更好的方案吗？