关键部分就一行代码: transform: skew(-25deg);
由于skew会带动其中的子元素一起倾斜，我们需要在内容区外面再放一个div，设置相反的度数，抵消掉倾斜效果。效果及代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>平行四边形</title> <style> .skew { width: 200px; height: 100px; background: lightgreen; line-height: 100px; margin: 0 auto; text-align: center; transform: skew(-25deg); } .skew-main { transform: skew(25deg); } </style> </head> <body> <div class="skew"> <div class="skew-main">平行四边形</div> </div> </body> </html>