How to use CSS to achieve slash effect

Today, I would like to share with you how to use CSS to achieve slash effect of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

How to use a single tag to achieve the slash effect shown in the following figure.

Image

If you take a closer look at this slash effect similar to a table, there are still some interesting ways to achieve it.

Let's assume that our HTML structure is as follows:

Assuming that the height and width are each 100px, within the limitations of a single tag, see how many ways you can achieve it.

Method 1. CSS3 rotation and scaling

This should be a method that can be thought of at first glance at the sight of requirements.

Here we draw a straight line using pseudo elements, then rotate the 45deg around the center of the div, and then zoom to get it.

A simple flowchart:

The schematic diagram is as follows:

one

CodePen Demo-CSS3 rotation scale slash [1]

Method 2. Realization of linear gradient

This method uses a linear gradient implementation of the background, and the important thing about the gradient background is that although the name is called a gradient, it can also draw a solid color rather than a gradient.

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

Transparent is a transparent color value.

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

Background: linear-gradient (45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%)

CodePen Demo-CSS slash (linear gradient implementation) [2]

Method 3. Pseudo elements + triangles

The next two methods are a bit of a slash for the sake of a slash.

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 use the two pseudo elements of div to draw two triangles of different sizes, and then stack them together to achieve a diagonal line.

Like this, with the white background of div, you get a slash:

CodePen Demo-CSS slash (pseudo element + triangle implementation) [3]

Law IV. Clip-path

What is clip-path? It can be regarded as a new property of CSS3, or the CSS version of SVG, to be exact.

With clip-path, we can define any clipping path we want.

Instead of delving into clip-path in this article, you can first move to MDN [4] or other articles about clip-path explanation.

Using clip-path 's polygon rule polygen, you can also easily make a triangle (in this case, we still use clip-path with pseudo elements):

The CSS code is as follows:

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

You can see that the CSS code, the main polygon (00,0 100px, 100px 100px, 00), is actually a series of path coordinate points, and the whole graph is the area surrounded by these points.

So using clip-path plus two pseudo elements, we can create a slash like solution three.

Of course, we can also use a different method to achieve the same goal, and solution 3 can also do the same. Take a look at the following effect:

These are all the contents of the article "how to use CSS to achieve slash effect". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.