Home > Article > Web Front-end > Implementation steps of writing parallelogram using CSS3 code

Implementation steps of writing parallelogram using CSS3 code

php中世界最好的语言Original: 2017-11-30 11:16:362667browse

We know that if you want to use CSS3 to create a rotation effect, you will use the CSS3 transform rotation attribute to write it out. The syntax is transform: skew. Let’s make a rotated quadrilateral for everyone as a case study. Friends who are interested can do it themselves.

The code is as follows:

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>用css3旋转写平行四边形</title>
<style type="text/css">
.box{width:1200px;margin:100px auto;}
.skew{width:1000px;height:734px;background:#f0eb4f;margin:0 auto;color:#000;
font-size:20px;line-height:500px;text-align:center;transform: skew(-15deg);}
.skew-main{transform: skew(15deg);}
.box02 {
width: 0;
height: 0;
border-top: 100px solid #f44261;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div>
<div><div>用css3旋转写平行四边形</div></div>
</div>
</body>
</html>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Implementation steps of writing parallelogram using CSS3 code

Related articles