Pure CSS Paint bubbles

We know that using CSS can draw out a variety of shapes: triangles, circles, squares, ovals, parallelogram, and so on, while 22 combinations between them can transform a variety of unexpected, bubble boxes are one of them. The simplest bubble box is a rectangular box + a triangle box.

Let's take a look at how to draw a triangle with CSS:

The border method of CSS drawing triangle

First draw a 100*100 rectangle, give him four sides with a different color border. The code is as follows:

. Demo{width:100px;Height:100px;Border:50px Solid;Border-color:Red PINK Yellow grey}
<Divclass= "Demo"></Div>

：

At this point we see the middle of the white rectangle is the div content area block, but when we set the div's width height to 0 o'clock:

. Demo{width:0px;Height:0px;Border:100px Solid;Border-color:Red PINK Yellow grey;margin:50px Auto}

The effect is as follows:

The triangle we wanted was there. When we want to get a triangle in a particular direction, we just set the border color of the other three sides to be transparent. The code is as follows:

. Demo{width:0px;Height:0px;Border:100px Solid;Border-color:red transparent transparent transparent;margin:50px Auto}

：

Also, you can draw right triangle by setting the same color on both sides of the adjacent side:

. Demo{width:00px;Height:0px;Border:100px Solid;Border-color:Red Red Yellow yellow;margin:50px Auto; }

：

With all kinds of triangles and then using absolute positioning, the next bubble is simple:

The code is as follows:

. Demo{width:260px;Height:100px;Border:10px Solid #abc;margin:50px Auto;position:relative}
. Demo span{position:Absolute; Left:60px;Bottom:-50px;
　　　　　　Border:20px Solid;Border-color:#abc Transparent Transparent transparent}

：

This time the triangle is solid, not the result we want, we can do what we want by overlaying an inline element strong with the same content background color:

. Demo{width:260px;Height:100px;Border:10px Solid #abc;margin:50px Auto;position:relative}. Demo Strong{position:Absolute; Left:60px;Bottom:-40px;
Border:20px Solid;Border-color:White transparent transparent transparent}. Demo span{position:Absolute; Left:60px;Bottom:-50px;
Border:20px Solid;Border-color:#abc Transparent Transparent transparent}  <Divclass= "Demo">       <span></span>       <Strong></Strong></Div>

：

Pure CSS Paint bubbles