[分享]css3怎么画一条有折角的线

CSS3是一种强大的网页样式语言，以前许多难以实现的效果如今都可以通过CSS3轻松实现。下面介绍一下如何使用CSS3来画一条有折角的线。.line { width: 100px; / 线的长度 / h...

CSS3是一种强大的网页样式语言，以前许多难以实现的效果如今都可以通过CSS3轻松实现。下面介绍一下如何使用CSS3来画一条有折角的线。

.line {
    width: 100px; /* 线的长度 */
    height: 3px; /* 线的高度 */
    background-color: #000; /* 线的颜色 */
    position: relative;
}

.line:before {
    content: ""; /* 伪元素 */
    position: absolute; 
    top: 50%; /* 在线的中间位置 */
    left: 0; /* 从左边开始 */
    width: 10px; /* 折角的长度 */
    height: 3px; /* 折角高度等于线的高度 */
    background: #000; /* 折角颜色与线的颜色一样 */
    transform-origin: bottom left; /* 旋转的起点在左下角 */
    transform: rotate(-45deg); /* 旋转45度 */
}

.line:after {
    content: ""; /* 伪元素 */
    position: absolute;
    top: 50%; /* 在线的中间位置 */
    right: 0; /* 从右边开始 */
    width: 10px; /* 折角的长度 */
    height: 3px; /* 折角高度等于线的高度 */
    background: #000; /* 折角颜色与线的颜色一样 */
    transform-origin: bottom right; /* 旋转的起点在右下角 */
    transform: rotate(45deg); /* 旋转45度 */
} 

使用上面的代码可以画出一条有折角的线。这个技巧可以应用到很多地方，如有需要可以随意变换线的长度、高度、颜色和折角的长度和角度。