24. August 2023

So erstellst du eine Prozessgrafik mit HTML & CSS.

Eine Prozessgrafik (oder Ablaufdiagramm) ist ein sinnvolles Gestaltungselement um Abläufe zu visualisieren. Z.B. so:

Für die Darstellung der Pfeile bzw. Dreiecke neben dem div kommt CSS „clip-path“ zum Einsatz.

Mit folgendem Code kannst du solch eine responsive Prozessgrafik mit HTML & CSS erstellen:

<style>
.process{
    display: flex;
}

.processbox{
    flex: 1 1 0px;
    background-color: #ccc; 
    padding: 15px 35px;
    clip-path: polygon(calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%, 0% 0%); 
}

.processbox:first-of-type{
    clip-path: polygon(calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 0 50%, 0% 0%); 
}

.processbox:last-of-type{
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 15px 50%, 0% 0%); 
}

@media ( max-width: 768px) {
    .process{
        display: unset;
    }

    .processbox{
        clip-path: polygon(100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px), 0 0, 50% 15px, 100% 0);
    }

    .processbox:first-of-type{
        clip-path: polygon(100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px), 0 0, 50% 0, 100% 0);
    }

    .processbox:last-of-type{
        clip-path: polygon(100% 100%, 50% 100%, 0 100%, 0 0, 50% 15px, 100% 0);
    }
}

</style>

<div class="process">
    <div class="processbox">
        <h2>Step 1</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="processbox">
        <h2>Step 2</h2>
        <p>Exercitationem officiis doloribus quo pariatur reiciendis aliquid, laborum natus quibusdam?</p>
    </div>
    <div class="processbox">
        <h2>Step 3</h2>
        <p>Fugit eum aspernatur maiores ab odio voluptas explicabo inventore suscipit nobis accusamus.</p>
    </div>
</div>Code-Sprache: HTML, XML (xml)