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

Question

我正试图在一个<hr />元素下生成一个蜘蛛网,但是当涉及到"圆形部分"时我遇到了一些问题.

我正在避免插入/使用SVG,因为这可能会或可能不会被用户插入(例如,用户可能hr在帖子中包含元素,并且我希望网络也出现在那里).

这表明hr元素需要以这样的方式设置样式,使其出现在元素的所有实例下hr(建议很少 - >没有额外的HTML元素).

我已经在下面列出了我想要实现的快速模型:

想要结果

像这个图像描绘的东西:

现行守则

目前,我正努力在两个伪元素之间制作"锭子",而我生成"锭子"的最接近的方式是这样的:

html{
    margin:0;
    padding:0;
    background:rgba(0,0,0,0.1);
    color:black;    
}
hr{
    height:30px;
    border-bottom:none;
    border-right:none;
    position:relative;    
}
hr:before, hr:after{
    content:"m";
    position:absolute;
    height:40px;
    width:1px;
    top:0;
    left:0;
    transform-origin:top left;
    transform:rotate(-20deg);
    background:black;
}
hr:after{
transform:rotate(-40deg);    
}

<hr />

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

到目前为止的尝试

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

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

---

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

Answer 1

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

CSS方法:

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

1. 左侧和顶部的直角边框是hr元素的实际边框.高度明确指定给hr元素,因为hr默认情况下元素只有边框高度.
2. 使用沿X轴和Y轴倾斜的伪元素实现中间的对角线.
3. 使用另一个伪元素实现圆形部分,该伪元素具有50%border-radius并且还在box-shadows其两侧和下方投射.顶部第一行的中心圆/椭圆是实际元素,其余是阴影.通过为阴影指定额外的扩散半径,从顶部开始增加第二行中形状的阴影大小.
4. 阴影实际上是使用两个阴影形成的,其中一个放在另一个阴影的顶部(因为我们只需要一个弧而不是一个实心的椭圆).

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;
}

<hr>

只是为了理解如何使用盒阴影来创建圆弧,这里有一个示例片段,其中阴影的颜色与背景不同.

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 red, -35px -4px 0px black,35px -1px 0px red, 34px -3px 0px black, -4px 56px 0px 16px red, -4px 53px 0px 15px black, -65px 56px 0px 16px red, -65px 53px 0px 15px black, -4px 53px 0px 15px black, 62px 56px 0px 20px red, 61px 52px 0px 18px black;
}

<hr>

该片段有三排圆形/椭圆形部分.下面是其输出的屏幕截图.

SVG方法:

下面是使用pathelement和a(arc)命令的蜘蛛网模式的快速SVG实现.

div.vector {
  margin: 10px auto;
  height: 250px;
  width: 600px;
  overflow: hidden;
  position: relative;
}
svg {
  height: 100%;
  width: 100%;
}
line,
path {
  stroke: #CCC;
  stroke-width: 2px;
  fill: none;
}
#top {
  stroke-width: 2px;
}
/* Just for demo */

body {
  background: #000;
}

<div class='vector'>
  <svg viewBox='0 0 600 250' preserveAspectRatio='none'>
    <line x1='1' y1='1' x2='600' y2='1' id='top' />
    <line x1='1' y1='1' x2='1' y2='250' />
    <line x1='1' y1='1' x2='450' y2='250' />
    <line x1='1' y1='1' x2='175' y2='250' />
    <path d='M 1,80 a 12,15 45 1,1 37,-26 a 10,12 0 1,1 14,-24 a 25,20 -45 1,1 40,-30' />
    <path d='M 1,160 a 17,20 45 1,1 75,-52 a 17,20 0 1,1 30,-48 a 30,25 -45 1,1 60,-70' />
    <path d='M 1,240 a 22,25 45 1,1 113,-78 a 23,26 0 1,1 46,-72 a 35,30 -45 1,1 90,-110' />
  </svg>
</div>