css画斜线带剪头 |x5内核 css3

首先大家可以使用transform: skew()来倾斜元素，但这并不能绘制出完整的斜线。更好的方法是使用伪元素实现，如下：

.element:before {
content: "";
display: block;
border-bottom: 1px solid #000;
width: 100%;
transform: rotate(45deg);  
}

这样就可以绘制出一条斜线了，但是如何加上剪头呢？大家可以借助border属性来实现，如下：

.element:after {
content: "";
display: block;
border-style: solid;
border-color: #000 transparent transparent;
border-width: 0.4em 0.4em 0 0;
height: 0;
width: 0;
position: absolute;
right: -0.2em;
top: 0.4em;
transform: rotate(45deg);
}

这样就可以绘制出一条带有剪头的斜线了。其中，border-color属性中的transparent表示使border变为透明，border-width控制边框宽度，height和width控制剪头大小，right和top控制剪头位置，最后用transform: rotate()调整角度即可。

现在大家将两段代码整合一下，拼接成如下代码即可同时画出斜线和带剪头的斜线：

.element:before {
content: "";
display: block;
border-bottom: 1px solid #000;
width: 100%;
transform: rotate(45deg);  
}
.element:after {
content: "";
display: block;
border-style: solid;
border-color: #000 transparent transparent;
border-width: 0.4em 0.4em 0 0;
height: 0;
width: 0;
position: absolute;
right: -0.2em;
top: 0.4em;
transform: rotate(45deg);
}

以上就是通过CSS绘制斜线带剪头的方法，可以根据实际情况灵活运用。希望对您有所帮助。