Today, when I was moving bricks, I saw a triangle vector arrow on the design draft. The designer didn’t give it, so I thought to ask the designer for it. At this time the big guy beside said: “not a triangle yao also ask the designer to take? Let me write you a few lines of code…”

Start with a triangle

It seems that this is a cliche topic, the previous interview will occasionally occur this question, I don’t know now the interview will ask this question. Using the border-raduis property of CSS, let’s take a look at the following example

<style>
    .box1 {
        width: 0px;
        height: 0px;
        border: 50px solid;
        border-left-color: blue;
        border-right-color: yellow;
        border-bottom-color: green;
        border-top-color: red;
    }
</style>
<div class="box1"></div>
Copy the code

Rendered in a browser, the four isosceles triangles have sides 50px and hypotenuse 100px. It’s easy to imagine that we can get an isosceles triangle by hiding any three triangles. Let’s say I want a triangle with a right Angle pointing down, I can add the following lines. Once you have a triangle, add transform: rotate(? Deg) rotate property to get triangles in any direction.

.box1{
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: red;
}
Copy the code

In modern engineering projects can also use less/ SASS and other pre-processing language ability encapsulation, color, direction as parameters, here is no longer described.

Bubble box

Now that we have the triangle, we can create a bubble box that is common in chat messages. Combine a triangle with a rectangle.

<style>
    .box {
        width: 200px;
        height: 100px;
        position: relative;
        background: red;
        border-radius: 10px;
    }

    .box::before {
        content: ' ';
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: red;
        position: absolute;
        top: 100%;
        left: 50%;
    }
</style>
<div class="box"></div>
Copy the code

Hollow triangle

If you want to create a hollowed-out triangle, the easiest way to think about it is to overlay two triangles, one covering the other.

<style>
    .box {
        width: 200px;
        height: 200px;
        position: relative;
    }

    .box::before {
        content: ' ';
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: red;
        position: absolute;
    }

    .box::after {
        content: ' ';
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: white;
        top: -2px;
        position: absolute;
    }
</style>
<div class="box"></div>
Copy the code

pentagram

The pentagram is made of three triangles rotated and superimposed

.box {
    position: relative;
    width: 0px;
    height: 0px;
    border-left: transparent 20px solid;
    border-right: transparent 20px solid;
    border-bottom: transparent 20px solid;
    border-top: red 15px solid;
}

.box::before {
    content: ' ';
    width: 0px;
    height: 0px;
    border-left: transparent 20px solid;
    border-right: transparent 20px solid;
    border-bottom: transparent 20px solid;
    border-top: red 15px solid;
    position: absolute;
    top: -23px;
    left: -10px;
    transform: rotate(286deg);

}

.box::after {
    content: ' ';
    width: 0px;
    height: 0px;
    border-left: transparent 20px solid;
    border-right: transparent 20px solid;
    border-bottom: transparent 20px solid;
    border-top: red 15px solid;
    position: absolute;
    top: -22px;
    left: -31px;
    transform: rotate(71deg);
}
Copy the code

star

A six-pointed star is just two triangles stacked on top of each other

.box {
    position: relative;

}

.box::before {
    content: '';
    width: 0px;
    height: 0px;
    border-left: transparent 30px solid;
    border-right: transparent 30px solid;
    border-bottom: transparent 52px solid;
    border-top: red 52px solid;
    position: absolute;


}

.box::after {
    content: '';
    width: 0px;
    height: 0px;
    border-left: transparent 30px solid;
    border-right: transparent 30px solid;
    border-bottom: transparent 52px solid;
    border-top: red 52px solid;
    position: absolute;
    transform: rotate(180deg);
    top: -36px;
}
<div class="box"></div>
Copy the code

trapezoidal

This is a question I was asked in the interview. The original question was about drawing an isosceles trapezoid with a top base of 10px, a bottom of 20px and a height of 5px.

When we drew the triangle above, we set the width and height of the box to 0, so let’s set the width and height of the box to see what happens.

<style>
    .box {
        width: 10px;
        height: 10px;
        border: 5px solid;
        border-left-color: black;
        border-right-color: green;
        border-bottom-color: blue;
        border-top-color: red;
    }
</style>
<div class="box"></div>

Copy the code

It is easy to see from the picture that the answer to the interview question can be obtained by making the other three borders transparent.

hexagon

Having a trapezoid, a hexagon is two trapezoids on top of each other

.box {
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: red;
    position: relative;
}

.box::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    left: -50%;
    top: -250%;
}
Copy the code

octagon

Similarly, an octagon is two trapezoids superimposed on a rectangle

.box {
    width: 20px;
    height: 10px;
    background: red;
    position: relative;
}

.box::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    top: 100%;
    transform: rotate(180deg);
}

.box::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    top: -200%;
}

Copy the code

The fan

We can add the border-radius attribute to the above code to get a 90-degree sector; The two sectors are added together to form a circle.

<style>
    .box {
        width: 0;
        height: 0;
        border: 50px solid;
        border-radius: 100%;
        border-left-color: black;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: transparent;
    }

    .circle::after {
        content: ' ';
        width: 0;
        height: 0;
        border: 45px solid;
        border-radius: 100%;
        border-left-color: green;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: transparent;
    }
</style>
<div class="box"></div>
<div class="box circle"></div>

Copy the code

heart

A heart is two semicircles superimposed on a diamond, as shown in the code below

<style>
.box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    transform: rotate(45deg);
}

.box::before {
    content: ' ';
    width: 0;
    height: 0;
    border: 50px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: red;
    position: absolute;
    left: -50px;
    transform: rotate(-45deg);
}

.box::after {
    content: ' ';
    width: 0;
    height: 0;
    border: 50px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    top: -50px;
    transform: rotate(-135deg);
}
</style>
Copy the code

pac-man

Pac-man hides a quarter of the circle

.box {
    width: 0;
    height: 0;
    border: 50px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: red;
    position: relative;
}
Copy the code

The grid background

The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors. The result belongs to the

data type, which is a special
data type.

In a word: Gradient along a line

After learning about this property, the most amazing thing to me is not that it can be very fancy, but that we can use it for “loops”. This loop is in quotation marks, which might be better called repetition. Let’s use this property to implement a grid effect.

.box {
    background-image: linear-gradient(to right, #000 1px, transparent 1px),
        linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 10px 10px;
    background-repeat: repeat;
    width: 500px;
    height: 500px;
}
Copy the code

Linear-gradient (to right, #000 1px, transparent 1px) produces a vertical line, Combine background-size with background-repeat to “loop” (of course you can also use repeat- Linear-gradient) to achieve the above table effect.

A histogram

In addition, the vertical gradient makes it very easy to construct a bar chart. The specific code is as follows:

.container {
    display: flex;
}

.container div {
    width: 40px;
    height: 200px;
    margin: 20px;
}

.box1 {
    background-image: linear-gradient(to bottom, transparent 40px, red 40px)
}

.box2 {
    background-image: linear-gradient(to bottom, transparent 80px, red 80px)
}

.box3 {
    background-image: linear-gradient(to bottom, transparent 120px, red 120px)
}

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
Copy the code

Arbitrary Angle sector

Above we implemented a very limited sector using border, now we try to draw a sector at any Angle.

0-180 ° fan

The main idea is to use a semicircle with the overflow: Hidden property of the box to achieve a 0-180° sector

.box {
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}

.box::before {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: transparent;
    position: absolute;
    transform: rotate(45deg);
    left: -100%;
}
<div class="box"></div>

Copy the code

As you can see from the figure above, the box and the pseudo element are completely matched, so if the pseudo element is rotated at this time, it will be blocked by the overflow: Hidden property of the box.

180-360 ° sector

The main idea is to use two semicircles, through rotation superposition to achieve.

.box {
    position: relative;
}

.box::before {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: transparent;
    position: absolute;
    transform: rotate(45deg);
}

.box::after {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: red;
    position: absolute;
    transform: rotate(45deg);
}
<div class="box"></div>

Copy the code

Ok, with the above code we have successfully drawn a circle (something is wrong, why so much code to draw a circle)

However, as long as we change the rotation Angle of any semicircle, we can get an arbitrary fan of 180 to 360 degrees.

The pie chart

So now that we have a sector from 0 to 360 degrees, it makes sense to take these sectors and add them on top of each other to draw a sector. Don’t bother. CSS has a property called conic-gradient(). Use it to draw a pie chart like this:

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red 60deg, blue 60deg 130deg, black 130deg 200deg, yellow 200deg);
}
Copy the code

In addition, arbitrary Angle fan is also handy

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red 37deg, transparent 37deg);
}
Copy the code

An updated version of Pac-Man

Above we achieved pac-Man with his mouth open and no beans to eat. Now let’s make up for those two things.

move

To achieve a moving Pac-Man, the main idea is to use two semicircles, each rotated 45 degrees, so that you can draw a 90 degree opening, and animation to make the opening open and close.

.box { transform: rotate(90deg); width: 200px; height: 200px; position: relative; } .left { content: ''; border: 100px solid; border-radius: 100%; border-left-color: transparent; border-right-color: red; border-top-color: red; border-bottom-color: transparent; position: absolute; transform: rotate(90deg); animation: left .5s linear infinite ; } .right { content: ''; border: 100px solid; border-radius: 100%; border-left-color: red; border-right-color: transparent; border-top-color: transparent; border-bottom-color: red; position: absolute; transform: rotate(0deg); animation: right .5s linear infinite ; } @keyframes left { 0% { transform: rotate(90deg); } 50% { transform: rotate(45deg); } 100% { transform: rotate(90deg); } } @keyframes right { 0% { transform: rotate(0deg); } 50% { transform: rotate(45deg); } 100% { transform: rotate(0deg); }}<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
Copy the code

Eat beans

All right, nice big mouth is moving. Now I want to ask you a question, what would you do if, instead of using JavaScript, you were given a DOM element and CSS and asked to draw N squares?

After a moment’s reflection, you may recall that I mentioned above that gradients can be used for “looping.” Yes, I used radial gradient here to fulfill the above requirements. Don’t forget to use background-repeat. Of course, you can also use repeat-radial gradient. There are no drawbacks to gradients other than poor compatibility (manual dog head)

The radial-gradient() CSS function creates an image that consists of a gradual transition between two or more colors emitted from the origin. Its shape can be circle or ellipse. This method yields an object of the CSS

data type, which is a type of
.

.bean {
    width: 100px;
    height: 20px;
    background-repeat: repeat-x;
    background-size: 20px 20px;
    background-image: radial-gradient(circle at center, red 4px, #fff 4px 20px);
}
<div class="bean">
Copy the code

Now we’re going to animate the beans in the same way

.bean { width: 100px; height: 20px; background-repeat: repeat-x; background-size: 20px 20px; background-image: radial-gradient(circle at center, red 4px, transparent 4px 20px); overflow: hidden; position: relative; animation: bean 1s linear infinite; } @keyframes bean { 0% { left: 0px; } 100% { left: -100px; }}<div class="bean"></div>
Copy the code

All that’s left is for the beans to rush into Pac-Man’s mouth

The last

CSS can still be used to draw some simple graphics, but in engineering it is better to go to the designer, after all, the properties of the browser compatibility is not quite the same. What are the CSS properties that have impressed you the most?