Ackerly#Article#实现CSS斜线1

# CSS斜线实现 ## CSS3旋转缩放 使用伪元素画出一条直线，围绕div中心旋转45deg，再缩放一下就可以得到. HTML ``` ``` CSS ``` HTML SCSSResult Skip Results Iframe EDIT ON 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); } } ``` ## 线性渐变 使用背景的线性渐变，选定线性渐变的方向为45deg，依次设置为transparent -> deeppink ->