菱形是由正方形旋转45度后形成的图片，所有我们首先需要新建一个正方形，然后把正方形旋转45度既可以得到菱形了。
新建html页面打开html编辑器，新建一个html文件。如图：
添加div标签在html页面上找到body标签，在body标签里新建一个div/div标签。如图：
添加样式标签。在html页面上找到title标签，在这个标签的后面添加styletype=text/css/style标签。如图：
设置菱形的样式类创建一个class类为diamond，在这个类中设置菱形的宽高都为px，背景为红色；然后使用transform设置旋转45度；最后设置样式居中。样式代码：.diamond{width:px;height:px;background-color:red;transform:rotate(45deg);-ms-transform:rotate(45deg);/*InternetExplorer*/-moz-transform:rotate(45deg);/*Firefox*/-webkit-transform:rotate(45deg);/*Safari和Chrome*/-o-transform:rotate(45deg);/*Opera*/margin:50pxauto;/*让菱形浏览器上居中*/}
引用class类在页面上找到div标签，在div标签上添加class=diamond，就可以引用diamond样式类了。如图：
查看菱形。保存html文件后，使用浏览器打开html文件即可看到菱形图形。如图：
菱形图形的所有代码：!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title菱形/titlestyletype=text/css.diamond{width:px;height:px;background-color:red;transform:rotate(45deg);-ms-transform:rotate(45deg);/*InternetExplorer*/-moz-transform:rotate(45deg);/*Firefox*/-webkit-transform:rotate(45deg);/*Safari和Chrome*/-o-transform:rotate(45deg);/*Opera*/margin:50pxauto;/*让菱形浏览器上居中*/}/style/headbodydiv/div/body/html