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:362618browse
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!
Related reading:
Tutorial on using the word-break attribute in css3
Related implementation of the deformation attribute in Css3 Steps
Steps to implement the effect of animated drop-down menu using css3
The above is the detailed content of Implementation steps of writing parallelogram using CSS3 code. For more information, please follow other related articles on the PHP Chinese website!