This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Using CSS, you can draw many shapes, such as triangles, trapezoids, circles, ellipses, and so on. You can draw not only rectangles, but also hearts, diamonds, eggs, Pac-Men, chat boxes, ICONS, and so on. Let’s take a look at how to implement these shapes. Divided into basic shape and combination shape, the basic shape is relatively easy to achieve, and the use of these basic shape combination, you can achieve a slightly more complex combination of shapes.

Up triangle

/* Up triangle */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #2BA245;
}
Copy the code

Downward triangle

/* Downward triangle */
.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #2BA245;
}
Copy the code

Left triangle

/* Left triangle */
.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid #2BA245;
}
Copy the code

Rightward triangle

/* Right triangle */
.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #2BA245;
}
Copy the code

Upper left triangle

/* Upper left triangle */
.triangle-topleft {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-top: 100px solid #2BA245;
}
Copy the code

Upper right triangle

/* Upper right triangle */
.triangle-topright {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-top: 100px solid #2BA245;
}
Copy the code

Lower left triangle

/* Bottom left triangle */
.triangle-bottomleft {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 100px solid #2BA245;
}
Copy the code

Lower right triangle

/* Bottom right triangle */
.triangle-bottomright {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid #2BA245;
}
Copy the code

trapezoidal

/ * trapezoidal * /
.trapezoid {
    width: 100px;
    height: 0;
    border-bottom: 100px solid #2BA245;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
Copy the code

parallelogram

The skew() function defines the skew transformation of an element on a two-dimensional plane

/* Parallelogram */
.parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(30deg);
    background: #2BA245;
}
Copy the code

(For attention)

Welcome to follow my public number: A class Coder, get daily dry goods push. Finally, thanks again for reading. I’m Silly