在CSS中的hr元素下创建一个Spider

当然,这看起来很可怕(主要是与可怕的'm重叠) - 但我似乎无法找到一种在没有它们的情况下产生这种形状的方法.

到目前为止的尝试

我试图通过content在伪元素中使用不同的字母来制作"网络链接"

我试过使用曲线/溢出隐藏,但这失败了(我可能会添加)

我真的很感激任何和所有的回应,如果有可能使用纯CSS,它会更好!但是现在我对如何实现这种功能感到失望.

注意:此答案仅发布,表明使用CSS可以实现此效果.但是,我建议SVG或PNG图像等用于这样的形状/效果,因为CSS并不是真的打算这样做.

CSS方法:

使用以下方法实现蜘蛛网效果:

左侧和顶部的直角边框是hr元素的实际边框.高度明确指定给hr元素,因为hr默认情况下元素只有边框高度.

使用沿X轴和Y轴倾斜的伪元素实现中间的对角线.

使用另一个伪元素实现圆形部分,该伪元素具有50%border-radius并且还在box-shadows其两侧和下方投射.顶部第一行的中心圆/椭圆是实际元素,其余是阴影.通过为阴影指定额外的扩散半径,从顶部开始增加第二行中形状的阴影大小.

阴影实际上是使用两个阴影形成的,其中一个放在另一个阴影的顶部(因为我们只需要一个弧而不是一个实心的椭圆).

hr{
    border-left: 2px solid black;
    border-top: 2px solid black;
    height: 200px;
    overflow: hidden;   
    position: relative;
    border-right: none;
    border-bottom: none;
}
hr:after{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    border-left: 2px solid black;
    border-top: 2px solid black;
    -webkit-transform: skewY(30deg) skew(30deg);
    -moz-transform: skewY(30deg) skew(30deg);
    transform: skewY(30deg) skew(30deg);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    transform-origin: left top;
}
hr:before{
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    height: 30px;
    width: 36px;
    border-radius: 50%;
    border-top: 2px solid;
    -webkit-transform: translate(20px, 26px) rotate(-45deg);
    -moz-transform: translate(20px, 26px) rotate(-45deg);
    transform: translate(20px, 26px) rotate(-45deg);
    box-shadow: -35px -2px 0px white, -35px -4px 0px black,35px -1px 0px white, 34px -3px 0px black, -4px 56px 0px 16px white, -4px 53px 0px 15px black, -65px 56px 0px 16px white, -65px 53px 0px 15px black, -4px 53px 0px 15px black, 62px 56px 0px 20px white, 61px 52px 0px 18px black;
}