Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.