Linking two div elements together with a circular connector at the termination point of the line

I am currently working on designing a set of cards that will showcase a timeline. I envision these cards to be connected by lines with circles at each end, for a visually appealing effect. At the moment, I have created the cards themselves but I am struggling with creating the connecting lines. My current code looks like this:

HTML:

<div class="card-wrapper">
   <div class="card">
   </div>

   <div class="card">
   </div>
</div>

CSS:

.card-wrapper {
   display: flex;
   align-items: center;
   align-content: center;
   flex-direction: row;
}

.card {
   width: 15rem;
   height: 25rem;
   background-color: #4090ff;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   margin: 2rem 4rem;
   box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
}

JSFiddle: https://jsfiddle.net/L3h9xe5d/10/

What I aim to achieve is similar to:https://i.stack.imgur.com/cc8RB.png

javascripthtmlcss

Answer №1

Kindly proceed with the instructions provided above.

HTML

<div class="panel-wrapper">
  <div class="panel">
    <div class="panel-inner"></div>
  </div>
  <div class="panel">
    <div class="panel-inner"></div>
  </div>
  <div class="panel">
    <div class="panel-inner"></div>
  </div>
  <div class="panel">
    <div class="panel-inner"></div>
  </div>
</div>

css

.panel-wrapper {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: row;
}
.panel {
  width: 15rem;
  height: 25rem;
  background-color: #4090ff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 2rem 4rem;
  box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
  position: relative;
}
.panel::after {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: #4090ff;
    border-radius: 50%;
    border: 6px solid #fff;
    content: "";
}
.panel::before {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: #4090ff;
    border-radius: 50%;
    border: 6px solid #fff;
    content: "";
    z-index: 9;
}
.panel:first-child::before,
.panel:last-child::after,
.panel:first-child .panel-inner::before,
.panel:last-child .panel-inner::after {
    display: none;
}
.panel-inner {
    width: 100%;
    height: 100%;
}
.panel-inner::after {
    position: absolute;
    right: -65px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000;
    content: "";
    width: 65px;
    height: 4px;
}
.panel-inner::before {
    position: absolute;
    left: -65px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000;
    content: "";
    width: 65px;
    height: 4px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

What is the function of the OmitThisParameter in TypeScript when referencing ES5 definitions?

I came across this specific type in the ES5 definitions for TypeScript and was intrigued by its purpose as the description provided seemed quite vague. /** * Removes the 'this' parameter from a function type. */ type OmitThisParameter<T> ...

javascripttypescript

Guide to assigning values to Input<input> and Select <select> elements using Javascript

I am looking to automatically set values in an input or select tag based on certain conditions defined in the JavaScript code below. However, I am facing an issue where the data does not get reflected in the database upon submitting. Any suggestions or cod ...

javascripthtml

determining the quantity within a collection of items

Is there a way to determine the order of an element within a set when clicked? For example, if I click on the third element in a set, can I get it to display as three? Check out this jsfiddle example for reference: http://jsfiddle.net/vtt3d/ ...

javascriptjquery

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

Numpad functionality in JQuery malfunctioning post-ajax request

Using the jQuery numpad plugin has been flawless until after an AJAX call. I have tried various functions like on('click') and others, but unfortunately, none of them worked as expected. Apologies for my poor English! You can find the extension l ...

javascriptjqueryhtmlajax

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

javascriptphphtmlajax

What is the best way to remove unnecessary space in a div when the content is smaller than the height, while still using overflow:auto?

HTML CODE <p>overflow:auto</p> <div class="auto">This code snippet will add a vertical scroll bar to the content within the div if it exceeds the height of the div. The background color is set to green, width and height are both 100px, ...

csshtmlheightoverflow

Utilizing Sequelize to Convert and Cast Data in iLike Queries

When using Sequelize for a full-text search, I encountered an issue with applying the iLike operator to columns of INTEGER or DATE type. How can I cast off a column in this case? To illustrate, here is an example of what I am trying to achieve with a Post ...

javascriptnode.jspostgresqlsequelize.js

What is the most effective method for populating an array with all images from a particular directory?

I recently installed a pdf viewer plugin on my website (check it out here: ), and I have a question regarding its functionality. I am looking to include approximately 60 - 70 pages in this flip book, but I am unsure of how to proceed. I have attempted var ...

javascriptjqueryhtmlpdf

Callback function not being triggered in Jquery's getJson method

I am currently faced with a javascript conundrum. Below is the snippet of code that I have been working on: $.get("categories/json_get_cities/" + stateId, function(result) { //code here }, 'json' ); ...

javascriptjqueryajaxjson

Exploring the world of two-dimensional arrays in D3 programming

I am interested in visualizing data obtained from the census data API, specifically from the ACS survey. The data is not in a typical JSON format, but rather as a two-dimensional array. It appears like this: [ [ “POPULATION”, “DATE”, ...

javascriptarraysjsond3.js

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

javascriptjqueryhtmlcssnodes

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

How can I make the header of the table component stay fixed while allowing only the rows to scroll? ...

javascriptcssvue.jsbuefy

Save hyperlinks in a storage system

I need to store an article in a MongoDB database, and some words within the article should be clickable links leading to other pages. However, when I display the article using an EJS template, the anchor tags I added while writing the article appear as pl ...

htmldatabaseexpressejsanchor

Adjust the arc angle on the canvas

I am currently working on creating a Semi Arc using Canvas. My question is regarding changing the overall angle of the arc to match the expected image. Expected Image Below is the HTML code for the Semi arc: <canvas id="myCanvas" width="578" height=" ...

jqueryhtmlcanvashtml5-canvas

A step-by-step guide to building an API page with Python

Hello everyone! I am just starting out with Vue.js and Python, and I have a question for you. My task is to create a basic webpage using Vue.js on the front end and Python on the backend, with Heidi SQL as my database. My team has requested that I create ...

javascriptpythonjsonvue.jsvuejs2

"Effortlessly emptying the text field with material-ui in React

I need assistance with clearing the content of two text fields and a button using Material-UI in React-JS. I am new to React and unsure how to achieve this. Below is the code I currently have: import React from 'react'; import RaisedButton from ...

javascriptreactjsmaterial-ui

The website's navigation system effectively directs content within the initial 100% viewport

I have encountered a slight issue. I created a Sidebar Navigation with some added "hey's" to demonstrate the problem: * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } nav { height: 100vh; width: 250px; borde ...

htmlcss

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

My Goal: I am working on a HTML/PHP page that displays the home page of my website. One section on this page is dedicated to highscores, with data retrieved from a database. Users can use a Select box to choose how the highscores are sorted. View the high ...

javascriptphpjqueryhtmlajax