Full directory

This series of articles, mainly around the CSS3 attributes, to achieve a variety of common effects, these effects are our actual combat development can often use the effect:

  1. CSS: Background and Borders
  2. CSS: Shape
  3. CSS: Visual Effects
  4. CSS: Font Typography
  5. CSS Reveals Practical Skills – User Experience [5]
  6. CSS: Structure and Layout
  7. CSS Revealed Combat Skills – Transitions and Animations [7]

preface

The content of this lesson is:

  1. Adaptive ellipse
  2. parallelogram
  3. The diamond pictures
  4. Simple pie chart
  5. triangle
  6. conclusion

One: adaptive ellipse

1. The square

width: 100px;
height: 100px;
background: greeen;
Copy the code

Next, let’s change the shape of the square by setting border-radius:

Round 2.

width: 100px; height: 100px; background: greeen; //border-radius: 50px; //border-radius: 50px 50px; //border-radius: 50%; //border-radius: 100px; All of the above can be written as circles, that is, the border-radius value can be either a specific value or a percentage (preferably for extensibility), and as long as the value is greater than half the length of the square (for example, 50px), the result is always a circle.Copy the code

3. Set a separate circle with four angular radii

width: 100px; height: 100px; border-radius: 50px 40px; // Equivalent to 50px 40px 50px 40px; The directions turn clockwise from the top left corner! background: green;Copy the code

4. Separate horizontal and vertical circles

The code is as follows:

width: 100px; height: 100px; border-radius: 50px / 40px; // Separate background: green;Copy the code

5. The ellipse

width: 200px; height: 100px; border-radius: 50% / 50%; // Background: green;Copy the code

6. Half ellipse

width: 100px;
height: 100px;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
background: green;
Copy the code

7. Quarter oval

The code is as follows:

width: 200px;
height: 100px;
border-radius: 100% 0 0 0 / 100% 0 0 0;
background: green;
Copy the code

Note: from ellipse, to semi-ellipse, to quarter ellipse, we need to understand how border-radius is set. This depends on how the value of border-radius is written: border-radius: 50% 50% 50% 50% / 50% 50&% 50% 50%; All other abbreviations can be converted to the previous one, which rotates clockwise from the top left corner, / with the horizontal radius in front and the vertical radius behind.

Two: parallelogram

In our daily projects, especially when designing the company’s official website, we often encounter this parallelogram button effect, which is as follows:

How to achieve the parallelogram effect of the button?

We might think, well, the rectangle is actually a superset of parallelograms, so we just need to stretch the rectangle diagonally and it won’t be long.

width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background: green;
transform: skewX(-45deg);
Copy the code

Ah, how the contents of the inside are also stretched, how to solve? The most straightforward method is to nest a layer of div within the content section and set the stretch Angle of the content separately, but what if there is still only one div? How to solve this problem with CSS? The code is as follows:

div{
    position: relative;
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
div::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: green;
    transform: skewX(-45deg);
}
Copy the code

This is a trick: use the pseudo element and the positioning attribute, set the pseudo element to a square (which is still a nested element), and transform the block, set z-index:-1, and place the pseudo element under the content as a background block. This method can be used whenever we want an element to be deformed, but we don’t want the contents of the element to be deformed.

Three: diamond pictures

  1. First, it’s easy to think of a square that you can rotate with transform:rotate().

    The code is as follows:

width: 100px;
height: 100px;
background: green;
transform: rotate(-45deg);
Copy the code

There is a problem with this scheme: we set the width and height to 100px, but after rotation, the elements need to take up more space. Otherwise, something like this happens

So using this scheme, we need to manually control the area occupied by the diamond, that is, the length and width of the diagonal.

  1. Next, we use another scheme, clip-path, which is similar to path in SVG. We can specify a series of coordinate points and then connect them together to form any graph we want. The code is as follows:
width: 200px;
height: 100px;
background: green;
clip-path:  polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
Copy the code

The effect is as follows:

Conclusion: Here, we used clip-path to draw four points, and the effect is diamond. Similarly, we can draw triangles, pentagons, hexagons and other figures with three points, as long as you determine the position of each point. Also note that clip-Path compatibility may not be as well supported as it currently is.

Four: Simple pie chart

First, take a look at the simplest circular effect:

The code is as follows:

width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
Copy the code

Then, let’s see what happens next: two semicircles

Let’s analyze the realization of the two semicircles:

  1. By adding two elements, setting the left and right circles and stitching them together, or to use only one element, you can set the left and right semicircle using both before and after, respectively
div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
}
div::before {
    content: ' ';
    display: inline-block;
    width: 50%;
    height: 100%;
    border-radius: 200% 0 0 200% / 100% 0 0 100%;
    background: green;
    position: absolute;
    left: 0px
}
div::after {
    content: ' ';
    display: inline-block;
    width: 50%;
    height: 100%;
    border-radius: 0 200% 200% 0 / 0 100% 100% 0;
    background: red;
    position: absolute;
    right: 0px
}

Copy the code
  1. Through linear-gradient gradient.
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to right, green 50%, red 0);
Copy the code

3. Linear-gradient is combined with background color.

width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
background-image: linear-gradient(to right, transparent 50%, red 0);
Copy the code

Next, let’s take a step further and look at the following effect:

First of all, let’s analyze the effect relative to our previous two semicircles. As long as we add another semicircle on this basis, and set the background color to green, and overlay the current two semicircles, and control the rotation Angle, then we get,

 div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {
    content: ' ';
    display: inline-block;
    width: 50%;
    height: 100px;
    border-radius: 0 100% 100% 0 / 50% 50%;
    margin-left: 50%;
    background-color: inherit;
    transform: rotate(45deg);
    transform-origin: 0 50%;
}
Copy the code

Step further, from the above code, we can see that the rotation Angle is written to 45deg, if you can dynamically control the rotation Angle, you can get a similar effect to the progress bar. The effect is as follows:

So, next, the key is how do you dynamically control the rotation Angle? Easy, animation will do.

The code is as follows:

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {
    content: ' ';
    display: inline-block;
    width: 50%;
    height: 100px;
    border-radius: 0 100% 100% 0 / 50% 50%;
    margin-left: 50%;
    background-color: inherit;
    transform-origin: 0 50%;
    animation: spin  3s linear infinite, bg  6s step-end infinite;
}
@keyframes spin {
    to {
        transform: rotate(.5turn);
    }
}
@keyframes bg{ 50% { background: red; }}Copy the code

Five: Triangles

First, let’s look at the square with the border:

width: 100px;
height: 100px;
border: 30px solid green;
Copy the code

Then, we set different border colors

The code is as follows:

width: 100px;
height: 100px;
border: 30px solid green;
border-color: green blue yellow red;
Copy the code

At this time, we found some surprise ah, border border, are diagonal lines, at this time, we naturally associate with our triangle, at this time, we just set the width and height of a little smaller, is it the triangle we want to get it?

La, la, la, la, la, and this is where the surprise really comes in. The last positive direction is made up of four triangles on the right,

The code is as follows:

width: 0px;
height: 0px;
border: 30px solid green;
border-color: green blue yellow red;
Copy the code

Let’s take a step further and set the color of three of the borders to white or transparent to create a triangle.

The code is as follows:

width: 0px;
height: 0px;
border: 30px solid green;
border-color: green transparent transparent transparent;
Copy the code

The effect is as follows:

By setting the border and width is set to 0, high use border border slash, you can get four square or rectangle, triangle, and then set up three border color is transparent, you can get what we want the triangle (or actually a square, only three of the color of the triangle is transparent)

Six: summarize

In this section, we implemented some common effects such as ellipses, semicircles, and quarter circles. The implementation principle is the use of border-radius, which can specify different radius values of four corners in horizontal and vertical directions respectively. At the same time, we also know the use of clip-path attribute, which can draw nodes and then line up. So we can achieve any shape we want.