CSS makes tips boxes, bubble boxes, and triangles

Sometimes our pages will need some prompt boxes or bubble boxes. Using CSS, we can achieve this effect.

In order to achieve the above effect, we must first understand how to make a triangle.

When we give a DIV a border of different colors, we can get the following effect.

.triangle{
        border-top:20px solid red;
        width:50px;
        height:50px;
        border-right:20px solid blue; 
        border-bottom:20px solid gray; 
        border-left:20px solid green;
   }

You can see that the four borders have become trapezoidal shapes instead of the rectangular shapes we thought.

When we change the width and height of the box to 0 , the four borders will start from the center point and become four triangles.

.triangle{
        border-top:20px solid red;
        width:0px;
        height:0px;
        border-right:20px solid blue; 
        border-bottom:20px solid gray; 
        border-left:20px solid green;
   }

In this way, when we only need one triangle, we just need to set the other border colors to transparent. For example, we only keep the upward-facing triangles

.triangle{
    border-top:20px solid transparent;
    width:0px;
    height:0px;
    border-right:20px solid transparent; 
    border-bottom:20px solid gray; 
    border-left:20px solid transparent;
   }

Now that we know how to make a triangle, we can use pseudo-classes and absolute positioning to make a bubble frame, for example:

.container{
        position:relative;
        margin-top:50px;
        padding:6px 12px;
        color:#fff;
        font-size:16px;
        line-height:25px;
        width:200px;
        height:50px;
        background-color:orange;
        border-radius:4px;    
   }
   p.container:after{
        position:absolute;
        top:-40px;
        right:20px;
        border-top:20px solid transparent;
        content:" "; // Don't omit the content, otherwise it won't be displayed width:0px;
        height:0px;
        border-right:20px solid transparent; 
        border-bottom:20px solid orange; 
        border-left:20px solid transparent;
   }


<p class="container">
    Hi, this article will teach you how to use CSS to create a bubble frame.
</p>

A simple bubble frame is ready. The triangular shape can be assembled according to actual needs.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Specific use of ES6 array copy and fill methods copyWithin() and fill()

>>: 5 super useful open source Docker tools highly recommended