Manipulating graphics with CSS - dynamically linking Divs

Question

Manipulating graphics with CSS - dynamically linking Divs

I'm attempting to create a unique design by connecting a series of dynamically generated content divs with CSS. The goal is to have a curved line every three divs, complete with an arrow image at the end and an additional line to separate the contents.

Does anyone have any suggestions on how this can be implemented? While I have limited experience with CSS3, I believe it might offer a solution for this task.

I've explored the idea of inserting a fixed-height element between the divs, but that approach seems too rigid and not practical in the long run.

Just to clarify, the "arrow" image itself is not the challenge here - it's figuring out how to represent the "green line" effectively.

If you need a visual reference, here's a mockup of what I'm aiming to achieve:

javascript html css graphics

Answer 1

Answer №1

If you want to achieve this, you can mix the following elements:

pseudo elements

:nth-child

Take a look at this basic code snippet to get started (keep in mind that it's just a starting point and you may need to add more before/after elements as list item children):

HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

body {
    text-align: center;
}

ul {
    display: inline-block;
    margin: 0 auto;
    list-style-type: none;
}

ul li {
    position: relative;
    float: right;
    border: solid 1px #000;
    margin: 5px;
    width: 50px;
    height: 50px;
}

ul li:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -11px;
    width: 11px;
    height: 5px;
    background: green;
}

li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -11px;
    width: 11px;
    height: 5px;
    background: green;
}

li:nth-child(3n+1) {
    margin-bottom: 60px;
    clear: right;
}

li:nth-child(3n+1):before {
    content: ''; <!-- potentially your image URL -->
}

Live Demo: http://jsfiddle.net/bartkarp/nd39pwh3/

If you have any questions or need further clarification, feel free to ask! :)

Answer 2

If you want to achieve this, you can mix the following elements:

pseudo elements

:nth-child

Take a look at this basic code snippet to get started (keep in mind that it's just a starting point and you may need to add more before/after elements as list item children):

HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

body {
    text-align: center;
}

ul {
    display: inline-block;
    margin: 0 auto;
    list-style-type: none;
}

ul li {
    position: relative;
    float: right;
    border: solid 1px #000;
    margin: 5px;
    width: 50px;
    height: 50px;
}

ul li:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -11px;
    width: 11px;
    height: 5px;
    background: green;
}

li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -11px;
    width: 11px;
    height: 5px;
    background: green;
}

li:nth-child(3n+1) {
    margin-bottom: 60px;
    clear: right;
}

li:nth-child(3n+1):before {
    content: ''; <!-- potentially your image URL -->
}

Live Demo: http://jsfiddle.net/bartkarp/nd39pwh3/

If you have any questions or need further clarification, feel free to ask! :)

Manipulating graphics with CSS - dynamically linking Divs

Answer №1

Similar questions

"What is the best way to indicate that the most recent web service call has finished in a Javascript

Tips for creating a multi-line text field with ellipsis using a div in CSS

JPlayer experiencing technical difficulties on Internet Explorer and Opera browsers

Is there a way to make a text area move along with the mouse cursor?

json request not functioning properly in Internet Explorer and experiencing difficulties with caching

A guide on clearing the selected value in a dropdown menu with Angular.js

Error: The function 'toEqual' is not recognized by the 'expect' method causing

Ways to detect drag event on a CytoscapeJS node (specifically the one directly underneath the cursor/touch)

What is the process for incorporating a unique pop-up window in Shopify?

Utilizing Javascript for logging into Facebook

Exploring the utilization of CSS host selectors with Angular4 to target direct child elements

JavaScript interprets code differently each time it runs

How can I automatically update the content of a specific Div element when the page is loading using the Ajax load() function

Showing JSON Array Values in a Table

Change the structure of the JavaScript object into a new format

Enhancing Security with Subresource Integrity in Angular-Cli

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

Issue: TypeError: Unable to access the 'getBoundingClientRect' property of an undefined value

What could be the reason behind the app.get middleware not functioning properly following the app.use middleware in ExpressJS?

Avoid interrupting the code execution until it has finished completely