How to write parallelogram with CSS3 code

This article is about how to write parallelograms in CSS3 code. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Write it out with the CSS3 transform rotation attribute of css3, which is transform:skew.

The code is as follows:

Write parallelogram with css3 rotation

.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

}

Write parallelogram with css3 rotation

Thank you for reading! This is the end of the article on "how to write parallelograms with CSS3 code". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!