css如何制作菱形
菱形是由正方形旋转45度后形成。使用css制作菱形首先需要使用css制作一个正方形，然后把正方形旋转45度既可以得到菱形了。
操作方法
- 01
新建html页面 打开html编辑器，新建一个html文件。如图：
- 02
添加<div>标签 在html页面上找到<body>标签，在<body>标签里新建一个<div></div>标签。如图：
- 03
添加样式标签。 在html页面上找到<title>标签，在这个标签的后面添加 <style type="text/css"></style>标签。如图：
- 04
设置菱形的样式类 创建一个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;/*让菱形浏览器上居中*/ }
- 05
引用class类 在页面上找到<div>标签，在<div>标签上添加 class="diamond" ，就可以引用diamond样式类了。如图：
- 06
查看菱形。 保存html文件后，使用浏览器打开html文件即可看到菱形图形。如图：
- 07
菱形图形的所有代码： <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>菱形</title> <style type="text/css"> .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;/*让菱形浏览器上居中*/ } </style></head><body> <div></div></body></html>