如何使用CSS制作具有倾斜边框的HTML分隔符

我想做一个看起来很奇怪的分隔器：

.jumbotron{
背景色：rgba（0,52,113,0.6）；
填充：2em 0；
}
jumbotron先生{
位置：相对位置；
背景色：白色；
边界：无；
}
jumbotron人力资源部：之前，
詹博顿人力资源部：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：0；
左：1px；
底边：1米纯白；
-webkit变换：旋转（-135度）；
-moz变换：旋转（-135度）；
-ms变换：旋转（-135度）；
-o变换：旋转（-135度）；
变换：旋转（-135度）；
}
詹伯顿人力资源部：之前{
排名：0；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
}
詹博顿人力资源部：之后{
底部：0；
-webkit转换来源：0 100%；
-ms变换原点：0.100%；
变换原点：0.100%；
}
.电网{
显示：表格；
垂直对齐：中间对齐；
边界间距：2.46153846em 0；
}
.grid>*{
显示：表格单元格；
}

这是一个标题

Lorem ipsum dolor sit amet，奉献精英。动植物，动植物

好吧，我认为在前后使用两个正方形更完美（只要我缩放过），给它们左边框，旋转45度。并正确使用

变换原点

您可以在这里修改代码片段，或者选择

.jumbotron{
背景色：rgba（0,52,113,0.6）；
填充：2em 0；
}    
jumbotron先生{
位置：相对位置；
背景色：白色；
边界：无；
}
jumbotron人力资源部：之前，
詹博顿人力资源部：之后{
内容：''；
位置：绝对位置；
宽度：20px；
高度：20px；
左：0px；
左边框：1px实心#fff；
}
詹伯顿人力资源部：之前{
顶部：-20px；
-webkit变换原点：左下角；
-ms变换原点：左下角；
变换原点：左下角；
-moz变换：旋转（45度）；
-webkit变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
詹博顿人力资源部：之后{
底部：-20px；
-webkit变换原点：左上；
-ms变换原点：左上；
变换原点：左上；
-moz变换：旋转（45度）；
-webkit变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
.电网{
显示：表格；
垂直对齐：中间对齐；
边界间距：2.46153846em 0；
}
.grid>*{
显示：表格单元格；
}

这是一个标题

Lorem ipsum dolor sit amet，奉献精英。动植物，动植物

我会使用

SVG

元素。这样一来，它就可以与站点一起扩展，并且总是看起来很好。这是一个不错的选择。但是内容是通过CMS插入的，放置

hr

比放置

SVG

更容易。此外，我想看看我是否能用CSS实现这一点。老实说，我很震惊pseudo人使用

..
:pseudo元素
和
标记。。从技术上讲，它应该有效吗？我怀疑。@Kheema Pandey:hr在大多数地方都是作为替换元素实现的，所以可能不是。