Clever implementation of CSS slash (cool small Effect)

Folio series, talk about some interesting CSS topics, the topic type of unrestrained, think of what to say, not only to broaden the problem-solving ideas, but also related to some easy to ignore the CSS details.

Problem-solving does not consider compatibility, the topic of unrestrained, think of what to say, if you feel the problem in the CSS properties of the rare, hurriedly to cram it.

Constantly updated, constantly updated, constantly updated, important things to say three Times.

All topics are summarized on my Github.

Using a single label, how to implement the diagonal effect shown. How to use CSS to draw a slash?

This is similar to the diagonal effect of the table, a little research, there are some interesting ways to achieve it.

We assume that our HTML structure is as follows:

?

1	<div></div>

Assuming that the aspect are each 100px, within a single label limit, see how many methods can be Implemented.

CSS3 rotation and scaling

This should be a way to see the needs of the first eye can be thought of.

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

A simple flowchart:

Demo Poke me: CSS3 rotation scaling slash

method two, Linear Gradient Realization

This approach uses a linear gradient implementation of the background, and the important point of the gradient background is that although the name is called a gradient, it is possible to draw a solid color rather than a gradient.

We selected a linear gradient with a direction of 45deg, and then set the gradient value to:----- transparent deeppink deeppink transparent .

transparentis a transparent color value.

Just like this simple sentence, you can achieve the slash effect:

?

1234	div{  background:    linear-gradient(45deg, transparent49.5%, deeppink 49.5%, deeppink 50.5%, transparent50.5%);}

Demo poke me: css slash (linear gradient Implementation)

Law iii, pseudo-elements + triangles

The next two methods are a bit of a diagonal and slash feeling.

With CSS border, It's easy to implement a triangle like this:

The CSS code is as Follows:

?

12345

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

here, we use div two to 伪元素 draw two triangles of varying sizes, and then implement a diagonal line by stacking them together in a way.

similarly, a diagonal line can be obtained with the white background of the Div:

Demo poke me: css slash (pseudo element + triangle Implementation)

Law iv, clip-path

clip-pathWhat's that? It can be considered a new attribute of CSS3, or, to be exact, the <path> CSS version of SVG.

Using clip-path , we can define any desired clipping path.

This article does not delve into clip-path , you can first move MDN or other about Clip-path to learn about the Article.

Using clip-path the Polygon rules polygon , you can also easily make a triangle (in the subject, we still use the pseudo-element clip-path ):

The CSS code is as Follows:

?

123456

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, the main polygon(0 0, 0 100px, 100px 100px, 0 0) , is actually a series of path coordinate points, the entire graph is the area surrounded by these points.

So with clip-path two pseudo-elements we can 解法三 make a slash like That.

Of course, We can also change a method, the same way, the solution three can also do this, look at the following:

Demo poke me: css Slash (clip-path)

This reprint ...

All topics are aggregated on my Github and sent to blogs hoping to get more Communication.

If there are more effects, we can communicate together and progress together

Clever implementation of CSS slash (cool small Effect)