Matthias: Div diagonal teilen

SELF-Forum

Div diagonal teilen

Matthias
– Informationen zu den Bewertungsregeln

Hi zusammen,

ist es möglich ein div diagonal zu teilen, also so:

-----
|\ A|
| \ |
|B |
-----

und A und B unterschiedliche Farben zu geben?

wäre super wenn mir jemand nen tipp geben könnte :o)

vg, matze

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div diagonal teilen

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi zusammen,

    ist es möglich ein div diagonal zu teilen, also so:

    |\ A|
    | \ |

    B |

    und A und B unterschiedliche Farben zu geben?

    als hintergrundgrafik wäre das lösbar

    wenn das ding dynamisch groß sein soll, svg als hintergrundgrafik (da werden aber nicht viele browser mitspielen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Div diagonal teilen

    ritschmanhard
    +1 Informationen zu den Bewertungsregeln

    Hi Matze!

    Direkt ist es nicht möglich, da CSS derzeit keine Diagonalen kennt - und dann aber doch wieder, weil es einen Ausweg gibt:
    Die Border eines Elements greift an den Ecken diagonal aneinander, also:
     ______________
    |\ b b b b b b
    |b ############
    |b ####Inhalt##
    |b ############

    Für den geschilderten Fall ist es also interessant, den folgenden Ausschnitt zu betrachten:
     _
    |\

    Setzt man also border-top und border-left auf unterschiedliche Farben, so erhält man die von dir gewünschte Aufteilung.

    Ein kleines Beispiel gefällig?

      
<html>  
<head>  
<title>diagonal</title>  
<style type="text/css">  
td       { height:200px; }  
.oben    { vertical-align:top; text-align: right; margin-right:0px; border:0px; }  
.unten   { vertical-align:bottom; text-align: left; margin-left:0px; border:0px; }  
</style>  
  
</head>  
<body>  
 <div style="border-top: 200px solid yellow; border-left: 100px solid red; border-right:0px; border-bottom:0px; width:0px;  
  
height:0px; position: absolute; top:0; left:0; z-index:-1; line-height:0px;"></div>  
 <table style="position: absolute; top:0; left:0; width: 100px; height: 200px; z-Index:1; padding:0px; margin:0px; border-collapse:collapse;">  
  <tr style="padding:0px; margin:0px; border:0px;">  
   <td class="unten">A</td>  
   <td class="oben">B</td>  
  </tr>  
 </table>  
</body>  
</html>

    Grüße,
    Richard

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln