Css3 makes graphics of various shapes

A,`css3`Pseudo elements

Common pseudo-elements in CSS3:

::first-line
::first-letter
::before
::after
::selection
::placeholder

Note:

According to the specification, pseudo-elements in CSS3 should be represented by double colons (::) instead of single colons (:), but since older VERSIONS of the W3C specification did not make this distinction, most browsers now support both.

Second, the use of`border-radius`To make the rounded

The realization method of semi-ellipse

.border-radius {
    width: 100px;
    height: 100px;
    background: skyblue;
    border-radius: 100% 100% 0 0;
}

Copy the code

A quarter ellipse

Principle of implementation:

To create a quarter ellipse, one of the angles needs to be 100% horizontal and vertical, and the other three angles must not be rounded.

Specific code:

.border-radius {
    width: 100px;
    height: 100px;
    background: skyblue;
    border-radius: 100% 0 0 0;
}
Copy the code

Specific effects:

Three,`css3`Draw triangles and dialog boxes

If we take a box and set the width and height to 0, and fill it with borders, what do we get?

.triangle {
    width: 0;
    height: 0;
    margin: 50px auto;
    border-top: 50px solid red;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid purple;
}
Copy the code

The result is:

Here’s an idea: if we set the color of either side of the border to transparent, what would happen?

.triangle {
    width: 0;
    height: 0;
    margin: 50px auto;
    border-top: 50px solid transparent;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid purple;
}
Copy the code

The results are as follows:

What happens if we make both sides transparent?

.triangle {
    width: 0;
    height: 0;
    margin: 50px auto;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-left: 50px solid purple;
}
Copy the code

What we end up with is a right triangle:

If we want a triangle, what’s the implementation? Set any three sides to be transparent. Let’s look at the code.

.triangle {
    width: 0;
    height: 0;
    margin: 50px auto;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid purple;
}
Copy the code

If we want a triangle with different directions, we can set all three sides in the other directions to be transparent and finally get the triangle you want.

The final result:

Final boss, how do we write a dialog box using triangles?

The first step is to set the borders of the dialog box

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

.dialog {
    width: 200px;
    height: 50px;
    background: skyblue;
    border-radius: 10px;
}
Copy the code

The result:

How do we set the triangle? In CSS3, we are provided with pseudo-elements ::before and ::after, so set the triangle and we hand it to the pseudo-element.

.dialog::before {
    content: ' ';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid skyblue;
    border-bottom: 10px solid transparent;
}

Copy the code

The result:

Realization of parallelogram and rhombus

The realization principle of the diamond is to rotate a square 45 degrees to get a diamond, the specific code is as follows:

.diamond {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background: skyblue;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

Copy the code

The result:

The principle of parallelogram implementation: First we need to set a normal quadrilateral, and then through the transform: skewX(-45deg), we can get a parallelogram.

<a href="#" class="button">
    <div>clike me</div>
</a>
Copy the code

.button {
    display: block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    margin: 100px auto;
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    background: skyblue;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
.button > div {
    transform: skewX(45deg);
}

Copy the code

Note:

The main solution of how to tilt the container without tilting the content is to apply another reverse skew() deformation to cancel the container deformation effect. The specific code is as follows:

.button > div {
    transform: skewX(45deg);
}
Copy the code

The final result:

Five,`css3`Achieve five-pointed and six-pointed stars

Pentagram of the realization of the principle, is mainly the use of three triangle splicing

First we make the first triangle, then the other two triangles, we can use the pseudo-element method.

To make the first triangle, the main thing is to make the left and right sides bigger, and then the triangle will be bigger, and then usecss3In thetransform: rotate()You rotate it and you get a triangle.

#star {
    width: 0;
    height: 0;
    border-bottom: 70px solid red;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
Copy the code

For the second triangle, pseudo-element + position + rotation is used

#star::before {
    content: ' ';
    position: absolute;
    top: -45px;
    left: -65px;
    width: 0;
    height: 0;
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

Copy the code

The third triangle is made in the same way as the first triangle, but at a different Angle.

#star::after {
    content: ' ';
    position: absolute;
    top: 3px;
    left: -105px;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}
Copy the code

Full implementation of the code:

#star {
    width: 0;
    height: 0;
    border-bottom: 70px solid red;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

#star::before {
    content: ' ';
    position: absolute;
    top: -45px;
    left: -65px;
    width: 0;
    height: 0;
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

#star::after {
    content: ' ';
    position: absolute;
    top: 3px;
    left: -105px;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

Copy the code

The idea of a hexagon is to use two triangles, one regular and the other rotated 180.

First let’s make the first triangle:

#star {
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

Copy the code

The final result:

For the second triangle, change the border-bottom to border-top on the basis of the first triangle, and then place it in the appropriate position by positioning:

#star::after {
    content: ' ';
    position: absolute;
    top: 30px;
    left: -50px;
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
Copy the code

The result:

The complete code is as follows:

#star {
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

#star::after {
    content: ' ';
    position: absolute;
    top: 30px;
    left: -50px;
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
Copy the code

Vi.`css3`Make pentagons and hexagons

The principle of making a pentagon is to use an equilateral triangle plus a trapezoid

So how do we make a trapezoid? When we make a triangle, we set the width and height to 0 respectively, and then use the border to fill, so we get one triangle after another. In fact, the principle of making a trapezoid is to set the width and height on the basis of this, you can get a trapezoid.

If you set the width and height to 0, you get a triangle.

#trapezoid {
    position: relative;
    width: 0;
    height: 0;
    border-top: 100px solid green;
    border-bottom: 100px solid red;
    border-right: 100px solid blue;
    border-left: 100px solid yellow;
}
Copy the code

If you set the width and height, you get a trapezoid.

#trapezoid {
    position: relative;
    width: 50px;
    height: 50px;
    border-top: 100px solid green;
    border-bottom: 100px solid red;
    border-right: 100px solid blue;
    border-left: 100px solid yellow;
}
Copy the code

The result:

The making of a pentagon

The principle of making pentagons is to use a triangle + a trapezoid composition

First of all, the making of trapezoid:

#trapezoid {
    position: relative;
    width: 100px;
    height: 0;
    border-top: 100px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
Copy the code

Again triangle making:

#trapezoid::before {
    content: ' ';
    position: absolute;
    top: -200px;
    left: -50px;
    width: 0;
    height: 0;
    border-bottom: 100px solid skyblue;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
}
Copy the code

The final effect:

Complete sample code:


#trapezoid {
    position: relative;
    width: 100px;
    height: 0;
    border-top: 100px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

#trapezoid::before {
    content: ' ';
    position: absolute;
    top: -200px;
    left: -50px;
    width: 0;
    height: 0;
    border-bottom: 100px solid skyblue;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
}
Copy the code

The making of hexagons

The production principle of hexagon is quite simple, is to use two triangles + a square, you can make a hexagon.

First let’s make a square:

#hexagon {
    position: relative;
    width: 100px;
    height: 55px;
    background: skyblue;
}
Copy the code

The resulting renderings:

Making of two triangles:

#hexagon::before {
    content: ' ';
    position: absolute;
    top: -25px;
    width: 0;
    height: 0;
    border-bottom: 25px solid skyblue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

#hexagon::after {
    content: ' ';
    position: absolute;
    top: 55px;
    width: 0;
    height: 0;
    border-top: 25px solid skyblue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
Copy the code

The resulting hexagon looks like:

Example code:

#hexagon {
    position: relative;
    width: 100px;
    height: 55px;
    background: skyblue;
}

#hexagon::before {
    content: ' ';
    position: absolute;
    top: -25px;
    width: 0;
    height: 0;
    border-bottom: 25px solid skyblue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

#hexagon::after {
    content: ' ';
    position: absolute;
    top: 55px;
    width: 0;
    height: 0;
    border-top: 25px solid skyblue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

Copy the code

Seven,`css3`Draw hearts and eggs

The shape of the heart is a combination of two rectangles, and the head can be set to a rounded corner using border-radius.

The first rectangle:

.heart {
    position: relative;
    width: 100px;
    height: 90px;
}

.heart::before {
    content: ' ';
    position: absolute;
    left: 50px;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 40px 0 0;
    -webkit-border-radius: 50px 40px 0 0;
    -moz-border-radius: 50px 40px 0 0;
    -ms-border-radius: 50px 40px 0 0;
    -o-border-radius: 50px 40px 0 0;
    transform-origin: 0 100%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

Copy the code

Second rectangle:

.heart::after {
    content: ' ';
    position: absolute;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 40px 0 0;
    -webkit-border-radius: 50px 40px 0 0;
    -moz-border-radius: 50px 40px 0 0;
    -ms-border-radius: 50px 40px 0 0;
    -o-border-radius: 50px 40px 0 0;
    transform-origin: 100% 100%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
Copy the code

The result:

Complete example code:

.heart {
    position: relative;
    width: 100px;
    height: 90px;
}

.heart::before {
    content: ' ';
    position: absolute;
    left: 50px;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 40px 0 0;
    -webkit-border-radius: 50px 40px 0 0;
    -moz-border-radius: 50px 40px 0 0;
    -ms-border-radius: 50px 40px 0 0;
    -o-border-radius: 50px 40px 0 0;
    transform-origin: 0 100%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.heart::after {
    content: ' ';
    position: absolute;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 40px 0 0;
    -webkit-border-radius: 50px 40px 0 0;
    -moz-border-radius: 50px 40px 0 0;
    -ms-border-radius: 50px 40px 0 0;
    -o-border-radius: 50px 40px 0 0;
    transform-origin: 100% 100%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

Copy the code

Egg implementation: egg implementation principle is a rectangle + Css3 border-radius property set a circle, then border-radius uses/to set different shape sizes.

.egg {
    width: 126px;
    height: 180px;
    background: #fa0;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -ms-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -o-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Copy the code

The final result:

Eight,`css3`Draw the Yin and Yang diagram of Tai Chi

The realization of the principle of Yin and Yang diagram, mainly divided into three parts

Oval + black and white in two parts
Oval white with black edges
Oval with white edge on black background

First, draw an ellipse on both sides of the black and white: this is done using border-left equal to width

Specific implementation code:

#taichi {
    position: relative;
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: white;
    border-left: 150px solid black; 
    
}

Copy the code

The effect of the implementation:

The second step is to implement the first ellipse above as a pseudo-element: left: -75px, border: 50px + padding: 25px

#taichi::before {
    content: ' ';
    position: absolute;
    left: -75px; 
    top: 0;
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 50px solid black;
    background-color: white;
}
Copy the code

The third step, which is also implemented using pseudo-elements, is implemented with the difference that top: 150px is equal to half the height of the parent element.

#taichi::after {
    content: ' ';
    position: absolute;
    top: 150px;
    left: -75px;
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 50px solid white;
    background-color: black;
}
Copy the code

Taiji Yin and Yang effect:

Complete code for the example:

#taichi {
    position: relative;
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: white;
    border-left: 150px solid black;
}

#taichi::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: -75px;
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 50px solid black;
    background-color: white;
}

#taichi::after {
    content: ' ';
    position: absolute;
    top: 150px;
    left: -75px;
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 50px solid white;
    background-color: black;
}
Copy the code

Css3 makes various shapes of graphics, temporarily stop.

Css3 makes graphics of various shapes

A,css3Pseudo elements

Second, the use ofborder-radiusTo make the rounded

Three,css3Draw triangles and dialog boxes

Realization of parallelogram and rhombus

Five,css3Achieve five-pointed and six-pointed stars

Vi.css3Make pentagons and hexagons

Seven,css3Draw hearts and eggs

Eight,css3Draw the Yin and Yang diagram of Tai Chi

Related Posts

Develop your own scaffolding from 0 to 1

Webpackage 4.0 split (4) – Javascript & splitChunk

Write a JS script to name your child

A,`css3`Pseudo elements

Second, the use of`border-radius`To make the rounded

Three,`css3`Draw triangles and dialog boxes

Five,`css3`Achieve five-pointed and six-pointed stars

Vi.`css3`Make pentagons and hexagons

Seven,`css3`Draw hearts and eggs

Eight,`css3`Draw the Yin and Yang diagram of Tai Chi