Example code for realizing the sharp corner effect of bubble dialog box using pure CSS

This article mainly introduces the implementation code of pure CSS to implement sharp corner processing of bubble dialog boxes. It is very good and has reference value. Friends who need it can refer to it

First, let’s take a look at the renderings:

Simple and crude code:
html：

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

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

Vernacular explanation:

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

The main principle is probably to have two small triangles with the same shape but different proportions, a solid triangle bot with the same background color, and a top with a white background, and the top will cover the bot, and then Adjust their size (generally speaking, the solid ones are larger than the white ones, so that the winking edges can be shown).

Finally tried every means to make them overlap (the white top is on top, the solid bot is below), and finally made them overlap by adjusting the absolute positioning parameters (left, top) Seamless. Okay, you're done. I wonder if you got it?

The above is the detailed content of Example code for realizing the sharp corner effect of bubble dialog box using pure CSS. For more information, please follow other related articles on the PHP Chinese website!