css怎么绘制斜线？

        我们假定我们的HTML结构如下：

　　<div></div>

　　法一、CSS3旋转缩放

　　这里我们使用伪元素画出一条直线，然后绕div中心旋转45度，再缩放一下就可以得到。

　　具体实现css代码:

　　div{

　　position:relative;

　　margin:50pxauto;

　　width:100px;

　　height:100px;

　　box-sizing:border-box;

　　border:1pxsolid#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:1pxsoliddeeppink;

　　transform-origin:bottomcenter;

　　//transform:rotateZ(45deg)scale(1.414);

　　animation:slash5sinfiniteease;

　　}

　　@keyframesslash{

　　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->deeppink->transparent。

　　transparent为透明色值。

　　就像这样简单的一句，即可实现斜线效果：

　　div{

　　background:

　　linear-gradient(45deg,transparent49.5%,deeppink49.5%,deeppink50.5%,transparent50.5%);

　　}