Code for implementing a bubble box in pseudo-elements in CSS3 (before, after)

This article brings the content is about the CSS3 in the pseudo-elements to implement the bubble box code (before, after), there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

Bubble box principle is actually the normal border + triangle, CSS implementation of the triangle is also using the border property
1, the triangle is solid

HTML code:

<div class= "Wrap" ></div>

CSS code:

. wrap{            position:relative;                        width:600px;                        height:400px;                        border:10px solid #3377aa;                        border-radius:20px;            }. wrap::before{            Position:absolute;                        Content: ";                        width:0;                        height:0;                        border-width:40px 20px;              /* up and down, left and right border value */            border-style:solid;                        Border-color: #3377aa transparent transparent;            /* Only set the above border color, left and right and below are set to transparent, there will be an inverted triangle *            /bottom: -80px;             /* Position the triangle below the center of the bottom */            left:50%;                        Margin-left: -20px;         }

：

2, if the need for the triangle is hollow, as below, you need to use both before and after

The CSS code is as follows:

.wrap::before{Position:absolute;                        Content: ";                        width:0;                        height:0;                        border-width:40px 20px;                        Border-style:solid;                        Border-color: #3377aa Transparent transparent;                        Bottom: -80px;                        left:50%;                Margin-left: -20px;                            }.wrap::after{Position:absolute;                            Content: ";                            width:0;                            height:0;                            border-width:40px 20px;                            Border-style:solid;                Border-color: #fff Transparent transparent;             /* White inverted triangle */bottom: -60px;                        /* Position and go up some */left:50%;                 Margin-left: -20px; }

The shorthand is this:

        . Wrap::before,                . wrap::after{                    Position:absolute;                                Content: ";                                width:0;                                height:0;                                border-width:40px 20px;                                Border-style:solid;                                Border-color: #3377aa transparent transparent;                                Bottom: -80px;                                left:50%;                                Margin-left: -20px;                        }        . wrap::after{                    Border-color: #fff transparent transparent;                                Bottom: -60px;                      }

The principle is to add two triangles, the following triangle border color and outside the box is consistent, the above border color is set to white, in order to better see, I will body color set to #ccc, as follows: