CSS绘制一个菱形
2020-03-28 本文已影响0人
六寸光阴丶
写在前面
如果本文对您有所帮助，就请点个关注吧！
解决思路
使用skew进行图形的倾斜转换，一个正方形进行转换，当两个参数都相同时可以得到一个菱形，同时使用rotateZ可以将菱形摆正位置。
效果
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菱形</title>
<style type="text/css">
.layout {
width: 200px;
height: 200px;
margin: 200px auto;
border: 1px solid black;
}
.rhombus {
transform: rotateZ(45deg)skew(-15deg, -15deg);
}
</style>
</head>
<body>
<div class="layout rhombus"></div>
</body>
</html>
