ritschmanhard: Div diagonal teilen

Beitrag lesen

SELF-Forum

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