Css-Transformation (Dreieck)

Question

ich weiß nicht, wie Dreiecksform in css2 zu drehen, hier habe ich verwendet CSS wie

HTML:

<div class="frontcornertop"></div> 

CSS:

.frontcornertop { 
transition: none 0s ease 0s ; 
line-height: 39px; 
margin: 0px; 
padding: 0px; 
letter-spacing: 1px; 
font-weight: 600; 
font-size: 30px; 
left: -345px; 
border-right: 0px solid transparent; 
border-bottom-color: rgba(51, 51, 51, 0.5); 
border-width: 345px 0px 345px 345px; 
} 

, aber ich brauche wie

Höhe 350px

wie kann ich diese drehen ??

Danke.

Answer 1

Sie können dies mit grundlegenden CSS:

body { 
 
    background: white; 
 
} 
 

 
#triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 350px solid transparent; 
 
    border-bottom: 350px solid transparent; 
 
    border-right: 500px solid black; 
 
} 
 

 
#inner { 
 
    position: relative; 
 
    top: -330px; 
 
    left: 11px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 330px solid transparent; 
 
    border-bottom: 330px solid transparent; 
 
    border-right: 480px solid white; 
 
}

<div id="triangle"> 
 
    <div id="inner"></div> 
 
</div>

Answer 2

Sie div dieses CSS drehen kann:

Transform: rotate(90deg); 

Aber ich habe eine Idee für Ihre Form:

.shape { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;  
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
}