The use CSS3 transform property of diamond, and a parallelogram Videos
2D transform implemented modification or conversion of 3D , four kinds of transformation can be achieved by the elements transform: rotation, scaling, moving, inclined
First, diamond
Diamond features: rhomboid four equal sides, can be understood as a square, the analysis can be obtained by the square of the rotation of diamond
transform: rotate (45deg); the rotation of the square 45deg
Note: transform attribute is not all browsers are supported for compatibility does not support the transform property of the browser, so use a vendor prefix. Add shortcut vendors prefix: after transform tab key. It can be automatically generated with the vendor prefixes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
.diamond{
width:200px;height:200px;
background: #faa;
margin:50px auto;
-webkit-transform:rotate(45deg) ; //Webkit / Safari / Chrome
-moz-transform:rotate(45deg) ; //Firefox
-ms-transform:rotate(45deg) ; //Internet Explorer
-o-transform:rotate(45deg) ; //Opera
transform:rotate(45deg) ;
}
</style>
</head>
<body>
<div class="diamond"></div>
</body>
</html>
Achieve results
Two, parallelogram
Using the skew value of the transform property, defines the number of elements inclination. 2D conversion inclined along the X-axis and Y-axis, X axis tilt 20deg, Y axis tilt 20deg .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
.prallel{
width:200px;
height:100px;
background: #faa;
margin:100px auto;
-webkit-transform: skew(20deg,20deg);
-ms-transform: skew(20deg,20deg);
-o-transform: skew(20deg,20deg);
transform: skew( 20deg,20deg);
}
</style>
</head>
<body>
<div class="prallel"></div>
</body>
</html>
表现效果：
