Dreieck mit CSS mit %Größe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
basteln
code
dank
dokument
dreieck
fetten strich
hilfe
http
methode
pixel
schau
spiel
stehendes dreieck
-
Hallo,
wie kann ich mit Hilfe von CSS ein dreieck "kontruieren", das sich jedoch mit der Größe an das parent-DIV anpasst, also mit %width und %height. Schließlich fällt somit die Methode mit dem Border raus, da sich die Border-Größe an die dazu gehörige DIV anpasst und die bei dieser Methode 0x0 groß ist.
Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
was für ein dreieck soll es denn sein ?
vielleicht ist ja dies ein denkanstoß für dich:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .dreieck { width:60%; height:60%; background-color:#AAA; position:relative; overflow:hidden; } .dreieck:after { content:""; position:absolute; width:100%; height:100%; top:0; left:-71%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); background-color:#F6F; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <body> <div style="width:400px;height:400px;background-color:#999;"> <div class="dreieck"> </div> </div> </body> </html> -
Dreiecke kann man sehr einfach basteln. Probiers mal mit:
<style> #outer{ height: 400px; width: 500px; border: 2px solid black; } #triangle{ border-bottom: 400px solid blue; border-right: 250px solid transparent; border-left: 250px solid transparent; } </style> <div id="outer"> <div id="triangle"></div> </div>
Damit hast du ein stehendes Dreieck. Schau dir die #triangle ganz genau an, spiel damit rum, dann weißt du, wie es funktinoiert :)
Mit border-bottom zeichne ich von unten einen fetten strich, welcher partiell von rechts und links transparent übermalt wird.
Leider ist dies nicht mit relativen Größen machbar, aber wenn du weißt wie groß die outer div ist, kannst du die Pixel anpassen.
Liebe Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage