Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines and css diagonal lines

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines and css diagonal lines

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

All questions are summarized in my Github.

 

9. Clever Implementation of CSS diagonal lines

How to achieve the diagonal line effect shown by using a single tag.

This is similar to the diagonal line effect of the table. After a detailed study, there are some interesting methods to achieve it.

We assume that ourHTMLThe structure is as follows:

<div></div>

Assuming that the height and width are PX, within the limits of a single tag, you can see how many methods can be implemented.

Method 1. CSS3 rotation and Scaling

This should belong to the method that can be thought of at first glance.

Here we use a pseudo element to draw a straight line, rotate 45deg around the div center, and then zoom it out.

A simple flowchart:

Demo stamp me: CSS3 rotating and zooming diagonal lines

Method 2: linear gradient implementation

This method uses the linear gradient of the background. It is very important that although the name is called a gradient, it can also draw solid colors instead of gradient colors.

We select the direction of the linear gradient to 45deg, and set the gradient value:transparent->deeppink->deeppink->transparent.

transparentIs the transparent color value.

A simple sentence like this can achieve the diagonal line effect:

div{  background:    linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);}

Demo stamp me: CSS diagonal lines (linear gradient implementation)

Method 3: pseudo element + triangle

The next two methods are a bit like diagonal lines.

With CSS border, you can easily implement a triangle like this:

The CSS code is as follows:

div{  border:50px solid transparent;  border-left:50px solid deeppink;  border-bottom:50px solid deeppink;}

Here, we usedivTwoPseudo elementDraw two triangles of different sizes and add them together to form a diagonal line.

In this way, you can get a diagonal line with the white background of the div:

Demo stamp me: CSS diagonal line (pseudo element + triangle implementation)

 

 

Method 4: clip-path

clip-pathWhat is it? It can be regarded as a new property of CSS3, or the CSS version of <path> of SVG.

Useclip-pathYou can define any desired cropping path.

This article will not be discussed in depthclip-pathTo learn more about the clip-path.

Useclip-pathPolygon rulespolygonYou can also easily create a triangle (we still use pseudo elements in this question ).clip-path):

The CSS code is as follows:

div {width: 100px;height: 100px;-webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);background: deeppink;}

You can see the CSS code, mainlypolygon(0 0, 0 100px, 100px 100px, 0 0)In fact, it is a series of coordinate points in the path. The whole graph is the area surrounded by these points.

So useclip-pathWe can add two pseudo elements likeSolution 3Produce diagonal lines in the same way.

Of course, we can also use another method to achieve the same goal. solution 3 can also do the same. Let's take a look at the following:

Demo stamp me: CSS diagonal line (clip-path)

 

All the questions are summarized on my Github and sent to my blog for more communication.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.