CSS to achieve chat bubble effect

1. Rendering

JD Effect

Simulation Effect

2. Principle

Prepare a box with height and width of 0

Set a border around this box

Replace the unnecessary borders with transparent , and set the corresponding colors where they need to be displayed

If you need to change its size, just set the border width border-width width

Set the font-size and line-height to 0 to avoid affecting the display.

Finally, use positioning to set it to the desired position

3. Code

HTML Structure

<div class="square">
    <p class="triangle"></p>
</div>

CSS Styles

.square {
  position: relative;
  width: 400px;
  height: 200px;
  background: green;
  margin: 150px auto;
}
.triangle {
	position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent red transparent;
  font-size: 0;
  line-height: 0;
}

This is the end of this article about CSS chat bubbles. For more relevant CSS chat bubbles content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!