Wie kann ich ein um 45 Grad gedrehtes Rechteck in CSS erstellen?

Question

Wie kann ich ein um 45 Grad gedrehtes Rechteck in CSS erstellen? Ich habe keine Ahnung, wo ich anfangen soll ...

Answer 1

Sie CSS Transform dies zu erreichen, verwenden könnte. Siehe Beispiel-Code unten:

div.examplediv { 
 
    margin-left: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
    /* Rotate div */ 
 
    -ms-transform: rotate(45deg); /* IE 9 */ 
 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(45deg); 
 
} 
 

 
p.exampletext { 
 
    /* Rotate p back so that only div is rotated. */ 
 
    -ms-transform: rotate(-45deg); /* IE 9 */ 
 
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(-45deg); 
 
    }

<div class="examplediv"> 
 
    <p class="exampletext"> 
 
     Hello 
 
    </p> 
 
</div>

Weitere Informationen finden Sie auf this

hoffe, das hilft!

Answer 2

Werfen Sie einen Blick auf CSS verwandelt: https://developer.mozilla.org/en-US/docs/Web/CSS/transform