php制作菱形,css如何制作菱形_百度经验

菱形是由正方形旋转45度后形成的图片，所有我们首先需要新建一个正方形，然后把正方形旋转45度既可以得到菱形了。

新建html页面打开html编辑器，新建一个html文件。如图：

添加

标签在html页面上找到标签，在标签里新建一个

添加样式标签。在html页面上找到

标签，在这个标签的后面添加 标签。如图：

设置菱形的样式类创建一个class类为diamond，在这个类中设置菱形的宽高都为100px，背景为红色；然后使用transform设置旋转45度；最后设置样式居中。样式代码：.diamond{   width: 100px;   height: 100px;   background-color: red;   transform:rotate(45deg);   -ms-transform:rotate(45deg); /* Internet Explorer */   -moz-transform:rotate(45deg); /* Firefox */   -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   -o-transform:rotate(45deg); /* Opera */   margin:50px auto;/*让菱形浏览器上居中*/  }

引用class类在页面上找到

标签，在

标签上添加 class="diamond" ，就可以引用diamond样式类了。如图：

查看菱形。保存html文件后，使用浏览器打开html文件即可看到菱形图形。如图：

菱形图形的所有代码：

  菱形