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

Managing class values with Selenium - Manipulating and updating classes

In the program I'm working on, there is a need to toggle which element receives the class value of "selected". <div class="countryValues"> <div data-val="" >USA and Canada</div> <div data-val="US" >USA - All< ...

pythonhtmlseleniumclasstags

What is the best way to arrange form inputs in a single row?

My form consists of three input boxes. While the first two inputs are single line, the third is a description field with 10 rows set as default. However, for some reason, this third box is not aligned properly with the other two. Please refer to the screen ...

htmlcss

Trouble with Click event not working in Electron and mouse cursor not changing when hovering over an HTML button?

I'm in the midst of a project that involves using the electron framework. Within my project, I have an HTML file, a CSS file, and a Javascript file. The issue at hand is that when I hover over a button, the expected hand pointer icon fails to appear d ...

javascripthtmlcsselectronaddeventlistener

Sorting by price using the ng-repeat directive is not suitable for this

Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...

javascripthtmlangularjsangularjs-orderby

Adjusting a polyline in Google Maps

I've successfully used Google Maps V3 API to create a polyline with 2 points. However, I now need to shorten the polyline. Issue: My goal is to make the polyline extend from the start point to the midpoint between the start and end points. How can I ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Modifying the CSS style of an element on PageA by clicking a button on PageB

For my app, I am incorporating tabs. I want to implement a user button that, when clicked on tab-detail.html, will update the CSS of an element located on its parent tab page, tab.html. .controller('TabCtrl', function($scope,Tabs) { $scope.t ...

cssangularjscontrollersbetween

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

Recently, I encountered a strange issue while trying to bundle a simple function using babel, typescript, and webpack. You can find the example that is not working at this link. To test it, simply download the code, run npm/yarn install, npm/yarn run buil ...

javascriptnode.jstypescriptwebpackbabeljs

Retrieve the value of data from the dataset

I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...

htmlvue.jsvue-componentvuetify.js

Using Drupal to automatically adjust comment widths

My webpage features two div blocks that are set to a default width of 900px each. To make them adjust their width according to the text content, I used float: left; or display: inline-block; This caused the divs to resize based on the size of the text, b ...

htmlcssdrupal-7width

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

javascriptjqueryhtmlcssbrowser

Node.js tutorial: Building routes with regex and implementing redirects

Can anyone provide guidance on how to utilize route and redirect URLs with parameters in Node.js using Express? If the URL is xyz/?s=test, it should redirect to indexRouter. If the URL is xyz/, it should also redirect to indexRouter. I'm facing issu ...

javascriptnode.jsregexexpress

State is causing a conflict by allowing multiple menus to open when mapping over Menu objects

I am currently encountering an issue with my Material UI <Menu>. The problem arises when I attempt to display some data and interface functionality by mapping over a <Card>, along with adding an <IconButton> on each card that opens a menu ...

javascriptreactjsmaterial-ui

Modify text using JQuery when the span is clicked

Currently, I am attempting to retrieve a value from the database: SenderDriver->total_trips. Everything seems fine, but I have a specific id that needs to be placed within onClick(), which then sets the value of the database variable: SenderDriver-> ...

javascriptjquerylaravel-5

The distinction between a keypress event and a click event

Due to my eyesight challenges, I am focusing on keyboard events for this question. When I set up a click event handler for a button like this: $("#button").on("click", function() { alert("clicked"); }); Since using the mouse is not an option for me, ...

javascriptjqueryeventsjquery-ui-autocompletescreen-readers

Change button to an ajax spinner when it is clicked using jQuery

$(".post-btn").html("<img src='../images/loader.gif' />"); Why isn't this code working? I know I have the correct selector because when I tried $(".post-btn").text('test'), it worked. I want the text of the button to change ...

javascriptjquerycssajax

Encountering the "Local resource can't be loaded" error when attempting to link a MediaSource object as the content for an HTML5 video tag

I'm attempting to make this specific example function properly. Everything runs smoothly when I click the link, but I encounter an error when trying to download the HTML file onto my local machine and repeat the process. An error message pops up sayi ...

javascripthtmlhtml5-videomedia-source

Is it possible to automatically access the most recent Beta build through package.json and npm?

We are currently working on a project that has a specific dependency requirement for the latest beta build from an npm library. However, there are also -dev builds within the library. For instance, in the "x-library" there might be versions like: "1.2.3- ...

javascriptnpmnpm-installpackage.json

Should the secret for express-session be a fixed value or should it change dynamically?

I'm uncertain whether the secret for this application should remain static or if it can be dynamic. Currently, I am setting the secret as follows: var salt1 = bcrypt.genSaltSync(); var salt2 = bcrypt.genSaltSync(); var secret = bcrypt.hashSync(salt1 ...

javascriptnode.jsexpresssessionsession-cookies

Updating the Origin of a Sound Element in HTML5

I am currently working on developing a personalized browser-based music application. I am at the initial stage of this project where my main goal is to create a button that allows users to change the song being played by an HTML5 audio player. I have attem ...

htmlhtml5-audio

Header with Sticky Behavior and Smooth Slide Down Animation

I am trying to achieve a scroll effect on my page where the header will move up when scrolling up, but at position 150 it should smoothly slide down and stay fixed at the top. I have tried various methods but haven't been able to get it right. Can som ...

jquerycsssticky