多语言展示
当前在线：733今日阅读：94今日分享：47

css如何制作菱形
菱形是由正方形旋转45度后形成。使用css制作菱形首先需要使用css制作一个正方形，然后把正方形旋转45度既可以得到菱形了。
方法/步骤
1

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

2

添加

标签在html页面上找到标签，在标签里新建一个
标签。如图：

3

添加样式标签。在html页面上找到标签，在这个标签的后面添加 <style type='text/css'></style>标签。如图：</p></div><div class="listcon"><span>4</span><p>设置菱形的样式类创建一个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;/*让菱形浏览器上居中*/  }</p></div><div class="listcon"><span>5</span><p>引用class类在页面上找到<div>标签，在<div>标签上添加 class='diamond' ，就可以引用diamond样式类了。如图：</p></div><div class="listcon"><span>6</span><p>查看菱形。保存html文件后，使用浏览器打开html文件即可看到菱形图形。如图：</p></div><div class="listcon"><span>7</span><p>菱形图形的所有代码：<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title>菱形  

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2026 www.onijiang.com Corporation, All Rights Reserved