It’s so easy to write a message box. There are a lot of tutorials on the Internet. Just copy and paste it into your own project. Most triangles are implemented with ::after or ::before, and the absolute position moves to the side to become the corner of the message box.

But if we were to implement a message box with a transparent background color, here’s how:

It seems that the common message box writing method this operation is not possible.

The difficulties in the

It seems impossible to change a message box to a transparent background in the usual way.

If the message box has a border, the corners of the message box are usually triangular with ::after and ::before, and then the larger triangle is superimposed on the smaller triangle. If we want to make the corners of the message box transparent, they are always shown behind as the color of the triangle that simulates the border.

(As shown in the figure above, I set opacity:.5 as the background triangle, and the opacity is the color of the border. The two colors are mixed together.)

The difficulties in the second

Another problem is that the corner transparency of the message box can penetrate the border line of the message box.

How to implement

Okay, so here’s how I did it.

Another way to make the corners of the message box is to write a little square and rotate it 45 degrees.

Then give the square top and right borders

Background: hSLA (0, 0, 0, 0);

Okay, so we’ve got an Angle that’s transparent to the background and we’re back to problem number two.

Want to write the body of a message box

Ok, then use ::after and ::before for the body div to create the left and right borders, separated by where the triangle is to be placed

Then put a border around the body div

Ha ha has solved problem two.

The final result

Let’s go to absolute position, let’s go to Z-index.

Ok, take it, suit of armor!!

Detailed code

<div class="warp" >
    <div class="box" >
        <div class="horn" ></div>
        <div class="content">Low-key guy is cute</div>
    </div>
</div>
Copy the code
 .warp{
    margin: auto;
    width: 75%;
    height: 100vh;
    z-index: 1;
    position: relative;
}

.box{
    overflow: hidden;
    .horn{
        right:.75rem;
        top:.18rem;
        position: absolute;
        transform: rotate(45deg);
        width:.25rem;
        height:.25rem;
        border-width: 0.02 rem 0rem 0rem 0.02 rem; 
        border-style: solid;
        border-color:#fff; 
        background: # 000;
        background: hsla(0.0.0.0);
    }
    .content{
        display: none;
        position: relative;
        margin:.3rem 0 .25rem 0;
        width: auto;
        float: right;
        padding:.1rem .3rem;
        font-size:.3rem;
        color: #fff;
        background: hsla(0.0.0.0);
        letter-spacing:.05rem;
        border-bottom:.02rem solid #fff;
        border-radius:.35rem;
        &::after{
            content:' ';
            position: absolute;
            width: 1.305 rem;
            height: 103%;
            top:0;
            left: 0;
            border-width: 0.02 rem .0rem .02rem .02rem;
            border-style: solid;
            border-color: #fff;
            border-radius:.35rem .0rem 0 .35rem;
        }
        &::before{
            content:' ';
            position: absolute;
            width:.71rem;
            height: 103%;
            top:0;
            right:0;
            border-width: 0.02 rem .02rem .02rem .0rem;
            border-style: solid;
            border-color: #fff;
            border-radius: 0 .35rem .35rem 0; }}Copy the code

conclusion

I do not know whether friends will use this style in their actual work. This article just want to share the solution idea, if you have a better solution to share with me, thank you.