在 CSS 中的 hr 元素下创建蜘蛛网

Question

我正在尝试在 <hr /> 元素下生成蜘蛛网，但在涉及 'circular parts' 时遇到了一些问题。

我避免使用 inserting/using SVG，因为这可能会或可能不会被用户插入（即用户可能在post，例如，我希望网络也出现在那里。

这表明 hr 元素需要 样式化 ，使其出现在 all[=65= 下] hr 元素的实例（建议很少->没有额外的 HTML 元素）。

我在下面包含了我正在努力实现的快速模型：

想要的结果

类似于这张图片描绘的东西：

当前代码

目前，我正在努力在两个伪元素之间制作'spindles'，而我生成'spindles'的最接近的方式是这样的：

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中使用不同的字母来制作'web links'

我试过使用curves/overflow隐藏，但是失败了（悲惨的我可能会补充）

我非常感谢对此的任何和所有回复，如果可以使用纯 CSS 那就更好了！但是现在我不知道如何实现这种功能。

Answer 1

这样的事情怎么样？ (JSFiddle)

使用 jQuery .after() 将蜘蛛网图像直接添加到 <hr> 标签的下方：

$(document).ready(function(){
    $("hr").after("<img src='http://www.repeatimpressions.com/images/2305.gif' class='hrSpiderWeb'>");
    //For every <hr> element, jQuery will add the spider web image after it
});

然后您的 html（或用户的）可以简单地是一个 <hr>，它的样式将在其下方显示图像。

您还可以添加以下内容CSS来改善效果：

$(document).ready(function() {
    $("hr").after("<img src='http://www.repeatimpressions.com/images/2305.gif' class='hrSpiderWeb'>");
    //For every <hr> element, jQuery will add the spider web image after it
});

.hrSpiderWeb {             /* Targeting the image*/
    height: 75px;          /* Giving it a height */
    margin-top: -2px;      /* No gap between the img and the line */
    margin-left: -5px;     /* Clean up/align the left hand side of it */
}
hr {
    margin-bottom: -2px;    /* Further alignment */
    /*Styling the <hr> - optional */
    height: 1px;
    color: black;
    background-color: black;
    border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some content</p>
  <hr>
<p>Some more content!</p>

Answer 2

我尽力了...

无法获得只有 2 个伪元素的第三扇区...

.spider:after, .spider:before {
    content: "";
    position: absolute;
    left: 40px;
    width: 100px;
    height: 80px;
    border: solid 3px transparent;
    border-top-color: black;
    border-left-color: black;
    transform: skewX(50deg);
    background-image: radial-gradient(ellipse at bottom right,  
        transparent 100px, black 100px, 
        black 102px, transparent 102px,
        transparent 120px, black 120px, 
        black 122px, transparent 122px
    );
    background-repeat: no-repeat;
    transform-origin: top left;
}

.spider:before {
    transform: skewX(50deg);
}
.spider:after {
    transform:  rotate(38deg) skewX(60deg);
}

<div class="spider"></div>

Answer 3

Note: This answer is posted only to show that this effect is achievable using CSS. However, I would recommend SVG or PNG image etc for such shapes/effects as CSS is not really intended to do this.

CSS 方法：

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

左侧和顶部的直角边框是hr元素的实际边框。高度明确分配给 hr 元素，因为默认情况下 hr 元素只有边框高度。
中间的对角线是使用沿 X 轴和 Y 轴倾斜的伪元素实现的。
圆形部分是使用另一个伪元素实现的，它有 50% border-radius 和额外的 box-shadows 投影在它的两侧和下方。从顶部算起第一行中央的 circle/ellipse 是实际元素，其余是阴影。通过为阴影分配额外的扩展半径，从顶部开始第二行中的形状增加了阴影的大小。
阴影实际上是使用两个阴影形成的，其中一个放置在另一个阴影之上（因为我们只需要一个圆弧而不是一个实心椭圆）。

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>

This 代码段包含三行 circular/elliptical 部分。下面是其输出的屏幕截图。

SVG 方法：

下面是使用 path 元素和 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>

在 CSS 中的 hr 元素下创建蜘蛛网

Create a Spiders web under a hr element in CSS

html

css

css-shapes