A pure CSS instance code that implements the tip effect of a bubble dialog box

This article mainly introduces the pure CSS implementation of the Bubble dialog box cusp processing implementation code, very good, with reference value, need to refer to the friend

Let's take a look:

Simple rough on the 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;}}}  

Plain English Explanation:

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

The main principle is that there are two of the same shape, different proportions of the small triangle, a solid triangular bot with the same background, a white bottom of the top, and top will be covered in the bot above, and then adjust their size (generally, the solid is larger than the white block, so as to show a wink of the edge AH).

Finally, try to make them coincident (the top of the white top, the solid bot below), and finally by adjusting the absolute positioning parameters (Left,top) to make it coincident seamlessly. All right, I'm done, don't know if you got it yet?