Create a Spiders website under the hr element in CSS

Question

I am trying to create a web under the <hr /> element, but I have a problem when it comes to the "round parts".

I avoid inserting / using SVG, as this may or may not be inserted by the user (for example, the user can include the hr element in the message, for example, and I want the website to appear in it too).

This may mean that the hr element should be styled so that it appears in all instances of the hr element (which indicates the absence of additional HTML elements).

I have included a quick layout of what I'm trying to achieve below:

Desired Result

Something like this image depicts:

Current code

I'm currently struggling to make “spindles” between two pseudo-elements, and the closest way I created the “spindles” is as follows:

 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 /> 

It certainly looks awful (mostly with terrible overlaps), but I can't find a way to create such a form without them.

Attempts still

• I tried to make "web links" using different letters in the content pseudo-elements

• I tried using curves / overflow hidden, but this failed (unfortunately I could add)

---

I would really appreciate any answers to this, and if that were possible using pure CSS, it would be even better! But now I am at a loss regarding how to achieve such functionality.

Answer 1

Note. This answer is only published to show that this effect is possible with CSS. However, I would recommend an SVG or PNG image, etc. For such forms / effects, since CSS is not really intended for this.

CSS approach:

The web effect is achieved using the following:

• The right corner borders on the left and top are the actual borders of the hr element. The height is explicitly assigned to the hr element, because the hr element by default has only the height of the border.
• The diagonal lines in the middle are achieved using a pseudo-element that is skewed along both the X and Y axes.
• Circular parts are achieved using another pseudo-element that has 50% border-radius , as well as additional box-shadows projected on both sides of it and below it. The center circle / ellipse in the first row from above is the actual element, and the rest are shadows. The size of the shadow increases for the figures in the second row from the top, assigning an additional radius of the shadow.
• A shadow is actually formed using two shadows, where one is on top of the other (because we just need an arc, not a solid 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> 

---

Just to understand how the boxes were used to create arcs, here is a sample fragment where the shadows are colored differently from the background.

 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 fragment has three rows of circular / elliptical parts. Below is a screenshot.

---

SVG approach:

The following is a brief implementation of the SVG spider pattern using path and a (arc) elements.

 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> 

Answer 2

My best attempt ...

Failed to get the third sector with two pseudo elements ...

 .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

How about something like that? ( JSFiddle )

Using jQuery .after() to add a web spider image directly below any <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 }); 

And then your html (or custom) can just be <hr> , and it will be styled with the image below it.

---

You can also add the following CSS to enhance the effect:

 $(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>