如何在css中创建一个45度旋转的矩形？

Question

如何在css中创建一个45度旋转的矩形？我不知道从哪里开始...

Answer 1

您可以使用CSS Transform来完成此操作。请参阅以下示例代码：

＆＃13;

＆＃13;

div.examplediv {
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    /* Rotate div */
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

p.exampletext {
    /* Rotate p back so that only div is rotated. */
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    }

＆＃13;

<div class="examplediv">
   <p class="exampletext">
      Hello
   </p>
</div>

＆＃13;

＆＃13;

＆＃13;

有关详细信息，请查看this

希望这有帮助！

Answer 2

看看CSS变换：https://developer.mozilla.org/en-US/docs/Web/CSS/transform