Html CSS中的垂直线和水平线

如何使用CSS制作这一行（见图）

.line1{
高度：150像素；
宽度：3倍；
背景：#000；
位置：相对位置；
}
.line2{
高度：5px；
宽度：300px；
背景：#000；
位置：绝对位置；
/*以下2个代码是第二行的优秀中心*/
最高：50%；
转化：translateY（-50%）；
}

使用as

:after

div{
高度：80px；
宽度：3倍；
背景：黑色；
边界半径：23%；
位置：相对位置；
}
部门：之后{
内容：''；
高度：3倍；
宽度：170px；
背景：黑色；
边界半径：23%；
位置：绝对位置；
最高：47%；
}

---

不需要复杂的代码，一个元素和几行CSS就足够了：

.line{
宽度：200px；
高度：100px；
左边框：5px实心；
背景：线性梯度（#000，#000）中心/100%5px无重复；
}

您尝试了什么？那么您想在图片上方显示这些行，以及到目前为止您做了什么？希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来，并解释您尝试过的方法。到目前为止，我看到的最佳解决方案似乎是您非常熟练地使用

背景：线性渐变
，：）：）您能帮我学习这些技巧吗！非常感谢。