css如何用画出菱形图(css如何用画出菱形)

CSS 如何用画出菱形

菱形是我们网页设计中常用到的图形之一，在 CSS3 中设计菱形是一件很简单的事情，下面我们来看看具体的实现方法。

第一步

通过旋转一个方块 45 度成为菱形。例如：

.diamond {
width: 50px;
height: 50px;
transform: rotate(45deg);
}

第二步

不管使用哪种方法，菱形的实现都是围绕这个旋转的方块展开的。菱形的形状很容易控制，增加方块的高度和宽度就可以增大菱形的大小，减小它们的数值就可以缩小菱形的大小。

两种实现方式

方式一：

.diamond {
width: 60px;
height: 60px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}

方式二：

.diamond {
width: 100px;
height: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 auto;
position: relative;
}

结语

通过以上两种方法，相信你已经能够轻松制作出漂亮的菱形了，继续好好学习 CSS 呦，让你的网页设计更加精彩！