Css transform (triangle)

Question

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

but i need like,

height 350px

how can i rotate this ??

Thanks.

Did you really mean CSS2 or did you mean CSS3? You can find some ideas here - http://stackoverflow.com/questions/15580009/are-diagonal-border-lines-possible-in-html-css/28263183#28263183 — Harry, Apr 02 '16 at 06:38
If you need to create a CSS triangle, then [use this online awesome generator](http://apps.eky.hk/css-triangle-generator/). — Vucko, Apr 02 '16 at 09:05

Farshid · Answer 1 · 2016-04-02T09:55:24.937

4

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

edited Apr 02 '16 at 09:55

answered Apr 02 '16 at 08:55

Farshid

497
1
6
20

score 1 · Answer 2 · answered Apr 02 '16 at 06:57

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>

Css transform (triangle)

2 Answers2