Nachricht für neue Nutzer.
Nachricht für engagierte Nutzer.

Benutzer:Enrico und Yannick/Seite 1

Aus ZUM-Unterrichten
< Benutzer:Enrico und Yannick
Version vom 20. Mai 2026, 09:40 Uhr von Enrico und Yannick (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meine Dreiecks-Lernwelt</title> <script src="https://cdn.tailwindcss.com"></script> <style> .triangle-shape { transition: all 0.5s ease-in-out; } </style> </head> <body class="bg-blue-50 min-h-screen p-4 md:p-8"> <div class="max-w-3xl mx-auto bg-white rounded-3xl shadow-xl…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

```html <!DOCTYPE html> <html lang="de"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Meine Dreiecks-Lernwelt</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
       .triangle-shape { transition: all 0.5s ease-in-out; }
   </style>

</head> <body class="bg-blue-50 min-h-screen p-4 md:p-8">

Entdecke die Welt der Dreiecke 📐

Klicke auf die Schaltflächen, um die Dreiecksform live zu verändern!

           <button onclick="updateTriangle('gleichseitig')" class="p-4 bg-yellow-100 hover:bg-yellow-200 rounded-2xl transition border-2 border-yellow-300 font-bold text-yellow-900">Gleichseitig</button>
           <button onclick="updateTriangle('gleichschenklig')" class="p-4 bg-green-100 hover:bg-green-200 rounded-2xl transition border-2 border-green-300 font-bold text-green-900">Gleichschenklig</button>
           <button onclick="updateTriangle('rechtwinklig')" class="p-4 bg-red-100 hover:bg-red-200 rounded-2xl transition border-2 border-red-300 font-bold text-red-900">Rechtwinklig</button>

Wähle ein Dreieck!

Hier erfährst du, was das gewählte Dreieck so besonders macht.

   <script>
       const info = {
           gleichseitig: {
               title: "Das Gleichseitige Dreieck",
               text: "Alle drei Seiten sind gleich lang. Die Form ist perfekt symmetrisch.",
               clip: "polygon(50% 0%, 0% 100%, 100% 100%)",
               color: "bg-yellow-500"
           },
           gleichschenklig: {
               title: "Das Gleichschenklige Dreieck",
               text: "Zwei Seiten sind gleich lang, eine ist die Basis.",
               clip: "polygon(50% 10%, 20% 100%, 80% 100%)",
               color: "bg-green-500"
           },
           rechtwinklig: {
               title: "Das Rechtwinklige Dreieck",
               text: "Ein Winkel beträgt exakt 90 Grad. Eine Seite bildet den rechten Winkel.",
               clip: "polygon(0% 0%, 0% 100%, 100% 100%)",
               color: "bg-red-500"
           }
       };

       function updateTriangle(type) {
           const data = info[type];
           document.getElementById('info-title').innerText = data.title;
           document.getElementById('info-text').innerText = data.text;
           
           const visual = document.getElementById('shape-visual');
           visual.style.clipPath = data.clip;
           visual.className = `w-40 h-32 ${data.color} triangle-shape mb-6`;
       }
   </script>

</body> </html>

```

Abgerufen von „http://zumunterrichten.idea-sketch.com/index.php?title=Benutzer:Enrico_und_Yannick/Seite_1&oldid=153437“