CSS to achieve prompt box with an arrow

We see a lot of UI framework prompt box with an arrow, you feel pretty, but did not know its principles before, today the Internet to find some information regarded as a clear principle;

First on renderings:

Principle Analysis:

    Above the arrow there did not feel like a triangle, yes, it is a triangle; but it is by this sharp two triangles to achieve;

First create a new div, draw the outline of the prompt box

<div class="demo"></div>

Given style:

    .demo{
        width:100px;
        height:100px;
        position:absolute;
        top: 35%;
        left:40%;   
        border:2px solid red;
        border-radius:8px;
    }

In this way, we simply prompt a square box came out;

key point:

   Now we add a child element in a div class = "demo" of the div inside

   <div class="demo">
        <div class="shixin"></div>
    </div>

Add style:

    .shixin{
        width:0;
        height:0;
        border:100px solid ;
        border-color:red green yellow blue;
        position: relative;
        top: -21%;
        left:15%;
    }

Width and height are set to 0; then set the width of a frame, the time being set to 100, set their own border color; in this case should be a square of 200 * 200, since the sum of the vertical frame 200px; adding the left and right borders of 200px;

Renderings:

 

 

Then we are now requiring only a fraction below it (below the triangle);

    .shixin{
        width:0;
        height:0;
        border:100px solid transparent;
        border-bottom-color:red;
        position: relative;
        top: -21%;
        left:15%;
    }

Remember: the color of the border attribute must write as transparent (clear), otherwise the default is black; then we need the following triangle, we just use the border-bottom-color property to add color to the next frame can be called solid triangles;

 

 

 

We then adjust the appropriate size, the size of the triangle is to adjust the width of the border, because this is actually the width of the border;

 

 

In this way, a solid triangle balloon effect has come out, but others UI framework are hollow ah, okay, then we go down:

In class = "demo" of the following plus a div div

    <div class="demo">
        <div class="shixin"></div>
        <div class="kongxin"></div>
    </div>

Add style:

    .kongxin{
        width:0;
        height:0;
        border:10px solid transparent;
        border-bottom-color:#fff;
        position: relative;
        top: -39%;
        left:15%;
    }

see it? We add to this triangle is the same style, to achieve the effect is actually hollow triangle of color to the background color, the default background is white, then by position: relative positioning to move relatively solid triangles overlap to be at;

 

 

Finally, our message box with an arrow is complete, and interested friends hurry to try it yourself!