Responsive design with html/css

I used pseudoelements here to create the inverted triangle for the "dialog bubble" that is only present in the desktop layout. Like this:

.content-highlight:after {
    content: "";
    background-color: white;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: -25px;
    right: 0px;
    clip-path: polygon(100% 0, 12% 0, 100% 100%);
  }

Is clip-path the right way to achieve this here? Could not find an easier way to create a triangular shape. First time doing this! feedback more than welcome!