How to draw diagonal lines in css

Using a single label, how to achieve the slash effect shown in the figure below. That is, how to draw a slash using CSS?

We assume that our HTML structure is as follows:

<div></div>

Method 1, CSS3 rotation scaling

Here we Use pseudo elements to draw a straight line, then rotate 45 degrees around the center of the div, and then scale it.

Specific implementation of css code:

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);
  }
}

Method 2, Linear gradient implementation

This method uses the linear gradient implementation of the background, and the gradient background is very The important point is that although the name is called gradient, you can also draw solid colors instead of gradient colors.

We 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.

A simple sentence like this can achieve the slash effect:

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

The above is the detailed content of How to draw diagonal lines in css. For more information, please follow other related articles on the PHP Chinese website!