实现css斜线

使用单个标签，实现斜线效果

css斜线效果

假定这是一个div,宽高100px;

• 方法一：c3旋转缩放

css css css

div{
  position:relative;
  margin:50px auto;
  width:100px;
  height:100px;
  box-sizing:border-box;
  border:1px solid #333;  
}

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

• 方法二：线性渐变linear-gradient()

渐变方向45deg,渐变色依次为transparent -> deeppink -> deeppink ->transparent。

        div{
            position:relative;
            margin:50px auto;
            width:100px;
            height:100px;
            box-sizing:border-box;
            border:1px solid #333;
            background:linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
        }

• 方法三：伪元素+三角形

css

下面一个这样的三角，上面一个白的，盖着他

三角
        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;
        }

• 方法四clip-path

div {
    width: 100px;
    height: 100px;
    -webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
    background: deeppink;
}
//polygon里面放三个点

完整代码

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