Generate a spider's web beneath an hour element using CSS

Question

Generate a spider's web beneath an hour element using CSS

I am attempting to create a spider's web effect under an <hr /> element, but I am encountering difficulties with the circular parts.

Instead of using SVG, I want to style the hr element so that the web appears under all instances of it, without requiring additional HTML elements.

Below is a rough depiction of what I am aiming for:

Desired Outcome

Something similar to the image shown here:

Current Code

My current approach to creating the 'spindles' between the pseudo elements involves the following CSS:

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

However, this method results in overlapping 'm's and does not achieve the desired effect.

Past Attempts

I have experimented with using different letters in the content property of the pseudo elements.
I have also tried incorporating curves and overflow hidden properties, but these attempts were unsuccessful.

Any suggestions or solutions would be greatly appreciated. If achieving this with pure CSS is possible, that would be ideal! Currently, I am struggling to find a method to attain this level of functionality.

html css css-shapes

Answer 1

Answer №1

Note: While it is possible to achieve this effect using CSS, it is recommended to use SVG or PNG images for such complex shapes/effects since CSS is not primarily designed for this purpose.

CSS Method:

To create the spider web effect, the following steps are taken:

The right angle borders on the left and top constitute the actual borders of the hr element. Height is explicitly set for the hr element as the default height of the hr element only includes the border thickness.
The diagonal lines in the middle are generated using a pseudo-element that is skewed along both the X and Y axes.
The circular elements are produced using another pseudo-element with a 50% border-radius, alongside additional box-shadows projected around and below it. The central circle/ellipse in the top row is the real element while the others are shadows. Enlarging the shadow size for the shapes in the second row is achieved by adding an extra spread radius to the shadow.
The arc-shaped shadow effect is created using two shadows, one placed over the other to form just an arc rather than a complete 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;
...

<hr>

For better comprehension of how box-shadows were used to create arcs, here's a snippet where the shadows have different colors 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 ...

<hr>

Here you can view three rows of circular/elliptical parts. A screenshot of its output is provided below.

SVG Method:

Here's a simple SVG implementation of the spider web pattern using the path element and a (arc) commands.

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;
}
/* For display purposes */

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=...

Answer 2

Note: While it is possible to achieve this effect using CSS, it is recommended to use SVG or PNG images for such complex shapes/effects since CSS is not primarily designed for this purpose.

CSS Method:

To create the spider web effect, the following steps are taken:

The right angle borders on the left and top constitute the actual borders of the hr element. Height is explicitly set for the hr element as the default height of the hr element only includes the border thickness.
The diagonal lines in the middle are generated using a pseudo-element that is skewed along both the X and Y axes.
The circular elements are produced using another pseudo-element with a 50% border-radius, alongside additional box-shadows projected around and below it. The central circle/ellipse in the top row is the real element while the others are shadows. Enlarging the shadow size for the shapes in the second row is achieved by adding an extra spread radius to the shadow.
The arc-shaped shadow effect is created using two shadows, one placed over the other to form just an arc rather than a complete 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;
...

<hr>

For better comprehension of how box-shadows were used to create arcs, here's a snippet where the shadows have different colors 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 ...

<hr>

Here you can view three rows of circular/elliptical parts. A screenshot of its output is provided below.

SVG Method:

Here's a simple SVG implementation of the spider web pattern using the path element and a (arc) commands.

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;
}
/* For display purposes */

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=...

Answer 3

Answer №2

After giving it my all...

It proved challenging to achieve the desired outcome with just 2 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 4

After giving it my all...

It proved challenging to achieve the desired outcome with just 2 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 5

Answer №3

Have you considered trying out something like this? (JSFiddle)

Here's a snippet using jQuery .after() to insert a spider's web image right below any <hr> tag:

$(document).ready(function(){
    $("hr").after("<img src='http://www.repeatimpressions.com/images/2305.gif' class='hrSpiderWeb'>");
    //This script will append the spider web image after each <hr> element
});

You can then simply incorporate an <hr> in your HTML markup, and it will automatically have the styled image beneath it.

To enhance the effect, consider adding the following CSS rules:

$(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 {             /* Styling for the image*/
    height: 75px;           /* Setting the height */
    margin-top: -2px;       /* Removing space between image and line */
    margin-left: -5px;      /* Aligning the left side of the image */
}
hr {
    margin-bottom: -2px;    /* Further alignment adjustments */
    /*Styling options for the <hr> - can be customized */
    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 6

Have you considered trying out something like this? (JSFiddle)

Here's a snippet using jQuery .after() to insert a spider's web image right below any <hr> tag:

$(document).ready(function(){
    $("hr").after("<img src='http://www.repeatimpressions.com/images/2305.gif' class='hrSpiderWeb'>");
    //This script will append the spider web image after each <hr> element
});

You can then simply incorporate an <hr> in your HTML markup, and it will automatically have the styled image beneath it.

To enhance the effect, consider adding the following CSS rules:

$(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 {             /* Styling for the image*/
    height: 75px;           /* Setting the height */
    margin-top: -2px;       /* Removing space between image and line */
    margin-left: -5px;      /* Aligning the left side of the image */
}
hr {
    margin-bottom: -2px;    /* Further alignment adjustments */
    /*Styling options for the <hr> - can be customized */
    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>

Generate a spider's web beneath an hour element using CSS

Answer №1

Answer №2

Answer №3

Similar questions

What is the purpose of row-gap (and column-gap) in both Flexbox and Grid Layouts?

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

Increase the size of the grid system column upon clicking on a Bootstrap icon

The CSS classes for the dropzonejs are not being properly updated for editing purposes

Tips for synchronizing the height of a scrollable list-group column with a neighboring column

CSS - Update BackgroundColor Depending on Child Element Color

Having trouble retrieving the object variable that begins with http

The content has spilled over from the div and leaked into the adjacent div

What could be causing my webGL page to fail loading the second time following a refresh?

Assistance required in adjusting the clickable area of the link

What is the best way to mirror an image using CSS3?

Tips for eliminating the gap between Bootstrap 4 columns

Unable to rotate 3D cube

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

What could be causing my cross fade to not repeat as intended?

Starting the description text immediately after the title while maintaining equal width for the title can be achieved by carefully

Learning how to retrieve a Docx file, or any type of file, using Django

Access a designated tab using cbpFWTabs

Utilizing AnimateCSS within a ReactJs component

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?