This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Preface:

This is also a detail I recently learned to find, is often in some websites, see the following figure such a small triangle, I did not learn CSS before, I always thought it is a Sprite diagram and so on. 😂

I am the front end that just begins to learn seriously recently, understand a little bit more than pure white a little bit.

If the article has those inadequacies, please point out in time, in this solemn thanks.

One, THE CSS triangle

So let’s talk a little bit about how to draw trigonometry, and what to draw it with, and then we’re pretty much done.

HTML code:

<div class="sanjiao">
</div>
Copy the code

The CSS code:

.sanjiao {
    /* Center it to look good */
    margin: 0 auto;
    /* The height and width must be specified as zero */
    width: 0;
    height: 0;
    /* Set the border and color on all sides */
    border-bottom: 10px solid #FFD5A1;
    border-top: 10px solid #00A1D6;
    border-left: 10px solid saddlebrown;
    border-right: 10px solid seagreen;
}
Copy the code

Let’s take a look at the code and talk about the rest later

The page display effect is a square of four small triangles.

How does that work?

Each side of the box has a trapezoid border, and when the box is 0, the top and bottom of the trapezoid (inside the border) are also 0, so the sides merge into a triangle.

The schematic diagram is roughly as follows:

When the box in the middle is zero in width and height, it becomes an Angle.

Two, CSS JINGdong application

Now that we know how this works, let’s do a little example.

HTML code:

<div class="main">

    <div class="box1">

    </div>
    <! Create another div for the triangle.
    <div class="box2">

    </div>
</div>
Copy the code

The CSS code:

.mian {
    /* We also set a relative position for the parent element */
    position: relative;

}

.box1 {
    margin-top:10px;
    width: 100px;
    height: 100px;
    background-color: #81c784;
    border-radius:5px;
}

.box2 {

    width: 0px;
    height: 0px;
    /* Set the width of the four borders and set the color to transparent */
    border: 10px solid transparent;

    /* Perform the following Settings so that there will be a small purple triangle */
    border-bottom: 10px solid #E1BEE7;
    position: absolute;
    left: 80px;
    top: -10px;

}
</style>
Copy the code

The final results are as follows:

There’s a lot more to play with with the CSS border, still learning…

Three, talk to yourself

Recently learning CSS, to tell you the truth, the feeling is really much more fun than the back end, much more creative, not as fixed as the back end (add, delete, change to check 😂).

At present, it is still the front end of the white, I hope you understand, is working hard.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.

A cute little cat emoji, too cute to resist the temptation.

Learning video: Miss Pink at Station B