CSS to achieve the small sharp corner effect of bubbles

Effect picture (the border color is too light, put it in {}):

{ }

Reference link Pure CSS bubble effect

Knowledge points needed:

When the width and height of the div are both 0, the entire border is composed of four triangles, one triangle on each side. This can be used to make small sharp corners, such as the following:

Set the color of the three unnecessary borders to the same as the background, so that you can get the desired small pointed corners, and then use positioning to adjust the position.

The above method can get a small pointed corner with color, but the effect is to show a small golden corner with a border. So on the basis of the existing ones, two small sharp corners appear, and then they are superimposed and displayed using the z-index attribute. Because two are needed, pseudo elements can be used so that no non-semantic elements appear. The code is as follows:

&::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid 10px;
    border-color: #E9E9E9 rgba(255, 255, 255, 0)
          rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    position: absolute;
    top: 208px;
    left: 40px;
    z-index: 2;
}

&::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid 8px;
    border-color: #fff rgba(255, 255, 255, 0) 
        rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    position: absolute;
    top: 207px;
    left: 41.5px;
    z-index: 3;
}

Summarize

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