具有气泡样式的CSS浮动div [重复]答案

【问题标题】：CSS float div with bubble style [duplicate]具有气泡样式的CSS浮动div [重复]
【发布时间】：2019-12-21 08:53:52
【问题描述】：

我有一个DIV，样式如下：

 <div class="modal"></div>

.modal {
        position: fixed;
    z-index: 999999;
    right: 310px;
    top: 67px;
    width: 431.6px;
    height: 550px;
    border-radius: 25px;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.14), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
    background-color: #f6f8fa;
    }

我必须添加一个气泡指示器，这样我才能得到这样的结果：

任何关于如何使用 CSS 获得它的线索？

【问题讨论】：

标签： css

【解决方案1】：

我认为你想要做的是一个 :after effect。

.modal::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: -30px;
  top: 180px;
  border: 15px solid;
  border-color: transparent transparent transparent white;
}

https://jsfiddle.net/1jfp2qc8/

【讨论】：