CSS float div with bubble style

Question

I have a DIV with the following style:

 <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;
    }

And I have to add a bubble indicator so I can get something like this:

Any clue on how to get that with CSS?

Answer 1

I think what you want to do is an :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/