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

但我需要，

身高350px

我怎么能旋转这个？

感谢。

Answer 1

您可以通过此CSS旋转div：

Transform: rotate(90deg);

但我对你的形状有一个想法：

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

Answer 2

您可以使用基本CSS：

执行此操作

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;