Developing procedural steps using CSS

I've been working on designing a step process using CSS, but I'm struggling to create the arrows that connect each circle, especially when the screen resolution changes.

https://i.sstatic.net/GLod9.png

This is my current attempt:

.process-row {
  display: table-row;
}

.process {
  display: table;
  width: 100%;
  position: relative;
}

.process-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.btn-circle {
  width: 120px;
  height: 50px;
  text-align: center;
  padding: 15px;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 50%;
  background-color: #34313c;
  border-color: #34313c;
  color: #fff;
}

.btn-circle.active {
  background-color: #ff6350;
  border-color: #ff6350;
}
<div class="process">
  <div class="process-row">
    <div class="process-step">

    </div>
    <div class="process-step">
      <span class="btn btn-circle active">Denied</span>
    </div>
    <div class="process-step">

    </div>
  </div>
  <div style="margin-top: 5px;"></div>
  <div class="process-row">
    <div class="process-step">
      <span class="btn btn-circle">Not Approved</span>
    </div>
    <div class="process-step">
      <span class="btn btn-circle">In Process</span>
    </div>
    <div class="process-step">
      <span class="btn btn-circle">Approved</span>
    </div>
  </div>
</div>

Answer №1

You can achieve the desired result using just CSS, but it may lack flexibility as it mainly focuses on the visual presentation rather than creating a solid structural layout.

This code snippet arranges one process on row 1 and three processes on row 2, similar to the provided example. The approach used ensures that each element is proportionally sized based on a specified unit (1vmin in this case) for responsive design across different screen sizes.

By utilizing CSS variables, modifications can be easily made when necessary. However, adjustments would need to be made if the number of processes changes to accommodate them in a row, limiting its flexibility in terms of structural modifications.

To view the snippet accurately, it is recommended to check the full page view as some details may not be displayed correctly in the mini snippet window. The code is responsive and should adapt well to various device widths in Chrome emulator.

Note: Some lines may not display correctly in the mini snippet window, but they should appear correctly when viewed on different devices in Chrome emulator.

* {
  margin: 0;
  padding: 0;
}

.container {
  /* Add demo styling */
  width: auto;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  position: relative;
}

.processes {
  --u: 1vmin;
  --w: 20;
  --h: 10;
  --bg: gray;
  --fs: 3;
  --fc: white;
  --lc: black;
  --lw: 0.25;
  --hl: linear-gradient(transparent 0, transparent calc(50% - (var(--lw) * var(--u) / 2)), var(--lc) calc(50% - (var(--lw) * var(--u) / 2)), var(--lc) calc(50% + (var(--lw) * var(--u) / 2)), transparent calc(50% + (var(--lw) * var(--u) / 2)), transparent 100%);
  --vl: linear-gradient(to right, transparent 0, transparent calc(50% - (var(--lw) * var(--u) / 2)), var(--lc) calc(50% - (var(--lw) * var(--u) / 2)), var(--lc) calc(50% + (var(--lw) * var(--u) / 2)), transparent calc(50% + (var(--lw) * var(--u) / 2)), transparent 100%);
  width: 90%;
  margin: 0 auto;
}

[class^="row"] {
  width: 100vmin;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

[class^="row"]>* {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: 50%;
  background-color: var(--bg);
  justify-content: center;
  align-items: center;
  display: flex;
  color: var(--fc);
  font-size: calc(var(--fs) * var(--u));
  margin: calc((var(--w) / 4) * var(--u));
  position: relative;
}

[class^="row"]>*::before,
[class^="row"]>*::after {
  position: absolute;
  font-size: calc(var(--fs) * var(--u));
  margin: 0;
  padding: 0;
  z-index: -1;
}

[class^="row"]>*::after {
  color: transparent;
}

[class^="row"]>*::before {
  color: var(--lc);
}

.arrow-on-right::before,
.line-on-right::after,
.arrow-on-left::before,
.line-on-left::after {
  content: '\2bc7 ';
  width: 20vmin;
  background-image: var(--hl);
}

.arrow-on-right::before,
.line-on-right::after {
  left: 100%;
}

.arrow-on-left::before,
.line-on-left::after {
  right: 100%;
  transform: rotate(180deg);
}

.arrow-on-top::before,
.line-on-top::after,
.arrow-on-bottom::before,
.line-on-bottom::after {
  content: '\2bc5';
  height: 15vmin;
  background-image: var(--vl);
}

.arrow-on-top::before,
.line-on-top::after {
  transform: rotate(180deg);
  rtop: -15vmin;
  bottom: 100%;
}

.arrow-on-bottom::before,
.line-on-bottom::after {
  top: 100%;
}
<div class="container">
  <div class="processes">
    <div class="row1">
      <div class="arrow-on-right line-on-left">p1</div>
    </div>
    <div class="row2">
      <div class="arrow-on-top">p2</div>
      <div class="arrow-on-left" style="--bg: orange;">p3</div>
      <div class="arrow-on-left line-on-top">p4</div>
    </div>
  </div>
</div>

Answer №2

In my search, I stumbled upon a couple of demos showcasing how to create flow charts using CSS. Feel free to explore this CodePen example -

https://codepen.io/demonwhite/pen/Gxqpzv

If you're interested in more examples, check out this collection at -

https://freefrontend.com/css-flowcharts/

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

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

The Bootstrap Navbar is displaying incorrectly and not adjusting properly in various viewports

To create a page header with a unique design, I am looking to incorporate a banner image with 4 cross lines along with the logo. Image Link The goal is to align text on both the dark blue and light blue bars with the logo on the left side of the image. ...

The NVD3 tooltip is being obscured by other divs

Attempting to make the NVD3 tooltip appear above all other divs has presented a challenge. With three charts lined up horizontally and tooltips that exceed the boundaries of their divs, adjusting the z-index creates a dilemma. Regardless of which side&apos ...

Footer not adhering to the bottom of specific pages

I have been using the code snippet below to ensure that most of my pages stick to the bottom. However, I've noticed that the ones that don't are sub-menu items that contain a contact form with captcha. I'm not sure what's causing this i ...

Creating a CSS rollover effect for your logo on a WordPress website

Struggling to implement a CSS image rollover on a Wordpress header logo. The solution may be simple for you experts, but I can't find it anywhere on Stackoverflow. Could it have something to do with the position? Adding :relative or :absolute doesn&ap ...

Ways to insert a divider into the menu items of a Kendo Toolbar split button

Kendo UI 2015.2.805 Is there a way to insert a separator line between menu items on a toolbar's split button dropdown? I am familiar with adding a separator line between toolbar buttons, but I am having trouble achieving the same effect for the menuB ...

I prefer a dynamic navbar that isn't fixed in place

I'm trying to make my navbar scroll along with the page content, without any fancy styling like disappearing effects. So far, I haven't been able to achieve this using Bootstrap 4. Here is how it currently appears: https://i.sstatic.net/R5gDq.p ...

What could be causing my randomly generated value to be overwritten so quickly?

I'm encountering an issue with my code. I am attempting to generate objects in random locations using drawHyperBall(), getRandomIntX(), and getRandomIntY(). However, the random value seems to be constantly overwritten. How can I resolve this problem? ...

AngularJS: How to automatically scroll to the bottom of a div

I cannot seem to scroll to the last message in my chat window. var app=angular.module('myApp', ['ngMaterial'] ); app.controller('ChatCtrl', function($window, $anchorScroll){ var self = this; self.messageWindowHeight = p ...

Creating a circular shape with a radius that can be adjusted

I'm trying to create an expanding bubble-like circle of various colors when clicked on a blank page. The circle should continue increasing in size each time it is clicked, only stopping when the mouse click is released. I am looking to use HTML, CSS, ...

Setting a div's width to cover 100% of the screen's width

I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the ...

What is the best way to align labels and textboxes next to each other when resizing?

I am facing an issue with screen resizing. The code below appears fine on a full screen, but as soon as I resize the window even a tiny bit, it starts to look distorted and unattractive. I have gone through the Bootstrap 4 grid layout tutorial, but it is n ...

What is the best way to fix a div at the top, while anchoring the content at the bottom of the div?

Currently, I am using Pandoc to convert files to PDF and incorporating HTML/CSS for document styling, specifically for printing purposes rather than for screen display. My objective is to replicate the "header" of a Word document. To achieve this, I have ...

What is the best way to include an arrow in a dropdown menu?

I've been working on restyling a Select box and I want to add a CSS arrow that rotates as the Select box expands. However, I'm struggling to align the arrow properly with the Select box. I've tried using code from the internet, but it hasn&a ...

Display specific content according to the hash in the URL

I have a website with a page (/categories.html) that contains around 50 p elements: <p id='BCI'>Blue_colored_items</p> <p id='RCI'>Red_colored_items</p> ... What I want is for the page to only display: Blue_co ...

Ways to integrate Bootstrap with Spring MVC for enhanced functionality

After creating Bootstrap HTML files in Bootstrap Studio, I structured them as shown in the following image: https://i.sstatic.net/NMAU5.png Next, I moved all these files to the WEB-INF/view folder in my Spring project and changed them to JSP format. I se ...

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

Tips for creating a hover-activated dropdown menu

How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...

Implementing a button on a polygon shape within an SVG

I have an SVG at the bottom and I would like to place a button on the bottom line that is also responsive. How can I achieve this using CSS? What I am trying to accomplish: Example Image Is it possible with just CSS and how should I go about implementin ...

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...