Wie kann ich Folgendes erstellen, reaktionsschnell, formen und text darüber hinzufügen? ⇐ HTML

[Anonymous]

Ich möchte dieses Design in HTML/CSS erstellen und auf jedem Square einen Text hinzufügen. /> Dieses Muster sollte auch reagieren. Deshalb möchte ich, dass es später codiert wird, sodass ich auf verschiedene Bildschirme modifiziert und angepasst habe. Ich habe auch versucht, das Bild direkt hinzuzufügen und den Text in Position absolut hinzuzufügen, aber es bricht das Design auf kleinen Bildschirmen unter 1200px. Jede Hilfe wird geschätzt.

Code: Select all

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}

.union-shape {
width: 800px;
height: 300px;
background: linear-gradient(to bottom, #e8ebfa, #c2c6f1);
clip-path: path("M 0,50 A 50,50 0 0 1 50,0 H 450 A 50,50 0 0 1 500,50 V 120 A 50,50 0 0 0 550,170 H 850 A 50,50 0 0 1 900,220 V 250 A 50,50 0 0 1 850,300 H 50 A 50,50 0 0 1 0,250 Z");
position: relative;
}

/* Optional Grid Overlay */
.union-shape::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
top: 0;
left: 0;
}< /code>