CODEWITHSUNDEEP
jqueryhtmlcss
Mansoor H
Mansoor H

Reputation: 604

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.

Upvotes: 2

Views: 4344

Answers (2)

Farshid
Farshid

Reputation: 518

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

Upvotes: 4

Pedram
Pedram

Reputation: 16575

You can do this with basic 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>

Upvotes: 1

Related Questions