“This is the 10th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

preface

Think about how many things you could draw with just an HTML tag

For those of you who don’t quite understand what this means, the question is about doing as much as possible with as few labels as possible

It’s still a bit confusing, but that’s ok. We’ll use an example in the following article to make it easier to understand

Let less create more

If we drew an effect like the one below, what would you do?

This effect itself is not difficult to achieve, and there are of course different ways to achieve it. But have you ever thought of doing it with just one tag? This article will show readers another SAO operation, only a label to achieve the above effect

Pseudo elements

Before I show you how to do this with a tag, let’s take a look at one thing: fake elements

MDN explains the pseudo-element: a pseudo-element is a keyword appended to the end of a selector that allows you to modify the style portal for a specific part of the selected element

You need to pay attention to the difference between pseudo-elements and pseudo-classes, the specific difference is not expanded here, students can consult the information

In pseudo-elements, ::after and ::before create a virtual node at the end and head of the element. Create a virtual node? That’s impressive. What does that mean? This means that one node can be used as three nodes.

However, virtual nodes created with pseudo-elements need to declare the Content property, otherwise the virtual node will not be rendered

implementation

If you say use one tag, never use more! The code:

<div class='ttt'> This is the test case copy </div>Copy the code
.ttt{
    width: 670rpx;
    height: 200rpx;
    background-color:white;
    border-radius:15rpx;
    margin-top:100rpx;
    position: relative;
    padding-top:65rpx;
    box-sizing:border-box;
    color: #4D5E74;
    font-size: 30rpx;
    font-weight: 600;
    text-align: center;
}
.ttt::before{
    content: ' ';
    width: 670rpx;
    height: 36rpx;
    background: rgba(246.106.104.1);
    background-image: 
        linear-gradient(45deg.rgba(255.255.255.2) 25%, transparent 0, transparent 75%.rgba(255.255.255.2) 0),
        linear-gradient(45deg.rgba(255.255.255.2) 25%, transparent 0, transparent 75%.rgba(255.255.255.2) 0);
    background-position: 0 0.4px 4px;
    background-size: 8px 8px;
    border-radius: 15rpx 15rpx 0 0;
    position: absolute;
    top: 0;
    left: 0;
}
.ttt::after{
    content: ' ';
    width: 20rpx;
    height: 40rpx;
    background-color: white;
    border-radius: 10rpx;
    position: absolute;
    top: -20rpx;
    left: 100rpx;
    box-shadow: 450rpx 0 0 0 white;
}
Copy the code

I used ::before to draw the background of the panel, and then used ::after to draw the hook of the panel. Some students may be confused, there are two hooks, so what is the other one? Shadows can also play an unexpected role in many cases!

Said in the back

I believe that many readers who did not play this SAO operation before reading will be issued a sigh, so simple?

Indeed, the implementation is really very simple, there is no operational difficulty in this article, the implementation of ideas is not novel. Just want to tell readers through this case, for business needs, we can think more, maybe we can come up with a faster, better and better solution!