在html中如何画斜线,在CSS中绘制斜线

您可以通过使用偏斜变换(transform：skew(Xdeg))在CSS中创建有角度的线.以下是一个示例代码段：

.shape {

height: 50px;

width: 200px;

border-bottom: 2px solid red;

border-right: 2px solid red;

-moz-transform: skew(-45deg);

-webkit-transform: skew(-45deg);

transform: skew(-45deg);

}

如果在下面的代码片段中使用单个元素(和几个伪元素),也可以使用一个在内容区域上方的一行和一个后面的一行：

.shape:before {

position: absolute;

bottom: -5px;

left: -5px;

content: '';

height: 50px;

width: 100%;

border-bottom: 3px solid red;

border-right: 4px solid red;

-webkit-transform: skew(-45deg);

-moz-transform: skew(-45deg);

transform: skew(-45deg);

}

.shape:after {

position: absolute;

content: '';

bottom: -10px;

left: 0px;

height: 55px;

width: 100%;

border-bottom: 3px solid red;

border-right: 4px solid red;

-webkit-transform: skew(-45deg);

-moz-transform: skew(-45deg);

transform: skew(-45deg);

z-index: -1;

}

.shape {

position: relative;

height: 80px;

width: 400px;

background: whitesmoke;

}

Some text that goes within the element...