Css transform (triangle)

i don't know how to rotate triangle shape in css2, here i have used css like,

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

it will produce like,

but i need like,

enter image description here

height 350px

how can i rotate this ??

Thanks.

Answers 1

  • You can rotate div by this CSS:

    Transform: rotate(90deg);
    

    But I have an idea for your shape:

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

Related Articles