绘制菱形和四边形
2020-01-31 本文已影响0人
钢笔先生
Time: 20200131
菱形
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>菱形和四边形</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="diamond" draggable="true"></div>
</body>
</html>
CSS
.diamond {
/*先画正方形，然后变形即可*/height: 200px;
width: 200px;
margin: 100px auto;
background-color: #6a6;
/* 顺时针旋转45度 */
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
效果：
截屏2020-01-31下午4.24.22.png
重点是：transform的使用，以及针对不同浏览器加前缀。
四边形
用的是skew(x-deg, y-deg)
可以设置两个参数，分别表示x-轴和y-轴的倾斜情况。
/* 四边形的样式 */
.parallel {
/*先画正方形，然后变形即可*/height: 100px;
width: 200px;
margin: 100px auto;
background-color: #6a6;
transform: skew(20deg);
-webkit-transform: skew(0, 30deg);
-moz-transform: skew(20deg);
-ms-transform: skew(20deg);
-o-transform: skew(20deg);
}
显示效果：
截屏2020-01-31下午4.38.18.png
END.
