Css преобразование (треугольник)

Question

я не знаю, как повернуть форму треугольника в CSS2, здесь я использовал CSS, как,

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; 
} 

, но мне нужно, как,

высота 350 пикселей

как я могу повернуть это ??

Спасибо.

Answer 1

Вы можете сделать это с основным 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

Вы можете вращать DIV этого CSS:

Transform: rotate(90deg); 

Но у меня есть идея для вашей фигуры:

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