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>