Multiple solutions to implement CSS slashes

How to achieve a slash effect using a single label. That is, how to draw slashes using CSS?

This kind of slash effect similar to a table, if you study it carefully, there are still some interesting ways to achieve it.

We assume our HTML structure is as follows:

<div></div>

 Assuming a height and width of 100px each, within the confines of a single label, see how many ways you can achieve it.

 

(1) CSS3 Rotation Zoom

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

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

A simple flow chart:

<style type="text/css">
div{
  position:relative;
  margin:50px auto;
  width:100px;
  height:100px;
  box-sizing:border-box;
  border:1px solid #333;  
  // background-color:#333;
  line-height:120px;
  text-indent:5px;
}

div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:50px;
  box-sizing:border-box;
  border-bottom:1px solid deeppink;
  transform-origin:bottom center;
  // transform:rotateZ(45deg) scale(1.414);
  animation:slash 5s infinite ease;
}
@keyframes slash{
  0%{
    transform:rotateZ(0deg) scale(1);
  }
  30%{
    transform:rotateZ(45deg) scale(1);
  }
  60%{
    transform:rotateZ(45deg) scale(1.414);
  }
  100%{
    transform:rotateZ(45deg) scale(1.414);
  }
}
</style>
<div></div>

 

 (2) Linear Gradient Implementation

This method is implemented using a linear gradient of the background. The important point of the gradient background is that although the name is called gradient, it can also draw a solid color instead of a gradient.

Method: Select the direction of the linear gradient as 45deg, and set the gradient color value to: transparent -> deeppink -> deeppink -> transparent

transparent is the transparent color value

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

 

(3) Pseudo element + triangle

 Using CSS border, you can easily achieve a triangle like this, a bit like slashing for slashes

 Use the two pseudo elements of div to draw two triangles of different sizes, and then superimpose them together to achieve a diagonal line.

 Similar to this, with the white background color of the div, you can get a slash:

<style type="text/css">
        body{
            background:#eee;
        }
        div{
            position:relative;
            margin:50px auto;
            width:100px;
            height:100px;
            box-sizing:border-box;
            border:1px solid #333;
            background:#fff;
            line-height:120px;
            text-indent:5px;
        }
        div::before{
            content:"";
            position:absolute;
            left:0;
            bottom:0;
            width:0;
            height:0;
            border:49px solid transparent;
            border-left:49px solid deeppink;
            border-bottom:49px solid deeppink;
            animation:slash 6s infinite ease;
        }
        div::after{
            content:"";
            position:absolute;
            left:0;
            bottom:0;
            width:0;
            height:0;
            border:48px solid transparent;
            border-left:48px solid #fff;
            border-bottom:48px solid #fff;
            animation:slash2 6s infinite ease;
        }
        @keyframes slash{
            0%{
                transform:translate(-50px);
            }
            30%{
                transform:translate(0px);
            }
            100%{
                transform:translate(0px);
            }
        }
        @keyframes slash2{
            0%{
                transform:translate(-100px);
            }
            30%{
                transform:translate(-100px);
            }
            60%{
                transform:translate(0px);
            }
            100%{
                transform:translate(0px);
            }
        }
    </style>

 

(4) clip-path clipping path

clip-path can be considered a new property of CSS3, or more precisely the CSS version of SVG's <path>.

Using clip-path, we can define any clipping path we want

body{
  background:#eee;
}
div{
  position:relative;
  margin:50px auto;
  width:100px;
  height:100px;
  box-sizing:border-box;
  // border:1px solid deeppink;  
  background-color:deeppink;
  line-height:120px;
  text-indent:5px;
}

div::before{
  content:"";
  position:absolute;
  left:0px;
  top:0;
  right:0;
  bottom:0;
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
  background:#fff;
  border:1px solid #333;
  transform:translateX(-120px);
  animation:move 5s infinite linear;
}

div::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  -webkit-clip-path: polygon(100px 99px, 100px 0, 1px 0, 100px 99px);
  background:#fff;
  border:1px solid #333;
  transform:translateX(120px);
  animation:move 5s infinite linear;
}

@keyframes move{
  40%{
    transform:translateX(0px);
  }
  100%{
    transform:translateX(0px);
  }
}

 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, and the entire graphic is the area enclosed by these points.

So using clip-path plus two pseudo-elements we can make slashes like solution 3

 

 

 

 

 

 

.