您的位置首页百科知识

css如何制作菱形

css如何制作菱形

的有关信息介绍如下:

css如何制作菱形

菱形是由正方形旋转45度后形成。使用css制作菱形首先需要使用css制作一个正方形,然后把正方形旋转45度既可以得到菱形了。

新建html页面

打开html编辑器,新建一个html文件。如图:

添加

标签

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

标签。如图:

添加样式标签。

在html页面上找到标签,在这个标签的后面添加 <style type="text/css"></style>标签。如图:</p><p>设置菱形的样式类</p><p>创建一个class类为diamond,在这个类中设置菱形的宽高都为100px,背景为红色;然后使用transform设置旋转45度;最后设置样式居中。</p><p>样式代码:</p><p>.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;/*让菱形浏览器上居中*/}</p><p>引用class类</p><p>在页面上找到<div>标签,在<div>标签上添加 class="diamond" ,就可以引用diamond样式类了。如图:</p><p>查看菱形。</p><p>保存html文件后,使用浏览器打开html文件即可看到菱形图形。如图:</p><p>菱形图形的所有代码:</p><p><!DOCTYPE html><html><head><meta charset="UTF-8"><title>菱形