CSS realizes the speech bubble effect with sharp corners in the small sharp corner chat dialog box

1. Use CSS to draw a small pointed-corner chat dialog box and a speech bubble with pointed corners. Let me show you the effect picture first. If you like it, please refer to the example code.

2. Effect

3. Code

css;toolbar:false"><style>
#talkbubble
  width: 160px; height: 80px;
  background: red;
  position: relative;
  border-radius: 10px;
  margin-left:20px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%; 
  top: 26px;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>

Supplement: Pure CSS to achieve bubble dialog box sharp corner processing

Let’s take a look at the effect diagram first:

Simple and rough code:

html:

    <div class="dialog-box">
                      <span class="bot"></span>
                      <span class="top"></span>
                    </div>

less:
      .dialog-box {
        position: relative;
        span {
          width:0; 
          height:0; 
          font-size:0; 
          overflow:hidden; 
          position:absolute;
          &.bot{
            border-width: 15px; 
            border-style: solid dashed dashed; 
            border-color: transparent transparent #F9743A transparent; 
            left: 15px; 
            top: -29px;
          }
          &.top{
            border-width:13px; 
            border-style:solid dashed dashed; 
            border-color:transparent transparent #fff transparent; 
            left:17px; 
            top:-25px;
          }
        }
      }

Explanation in plain language:

If you want sharp corners in other directions, adjust the order of boder-color (top, right, bottom, left).

The main principle is probably to have two small triangles of the same shape but different proportions, a solid triangle bot with the same color as the background, and a top with a white background, and the top will cover the bot, and then adjust their sizes (generally speaking, the solid one should be larger than the white block, so that the edges can show the color).

Finally, I tried every possible way to make them overlap (white top on top, solid bot on the bottom), and finally adjusted the absolute positioning parameters (left, top) to make them overlap seamlessly. Okay, it’s done. Do you get it?

Summarize

This is the end of this article about how to use CSS to achieve a small pointed corner chat dialog box with a pointed speech bubble effect. For more relevant CSS pointed corner chat dialog box content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!