开发过程中,常常会有平行四边形的背景色需求,这里展示两种常用的方法:
方法一:transform: skewX(角度); 使元素倾斜形成平行四边形,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平行四边形</title> <style> .parallelogram { width: 200px; height: 100px; margin: 50px; background: #3498db; transform: skew(-45deg); text-align: center; line-height: 100px; } </style> </head> <body> <div class="parallelogram">我是平行四边形</div> </body> </html>
复制
代码效果如下:
可以看到,平行四边形出来了,但是里面的文字也跟着倾斜了,这是因为这个是倾斜的整个盒子,里面的内容自然也会跟着倾斜,如果想要里面的内容正常展示,里面的内容需要反方向的倾斜,代码如下:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平行四边形</title> <style> .parallelogram { width: 200px; height: 100px; margin: 50px; background: #3498db; transform: skew(-45deg); } .childbox{ transform: skew(45deg); text-align: center; line-height: 100px; } </style> </head> <body> <div class="parallelogram"> <div class="childbox">我是平行四边形</div> </div> </body> </html>
复制
效果如下:
方法二:clip-path: polygon()绘制平行四边形(个人推荐),代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平行四边形</title> <style> .parallelogram { width: 200px; height: 100px; background-color: #3498db; clip-path: polygon(50px 0%, 100% 0%, 150px 100%, 0% 100%); text-align: center; line-height: 100px; } </style> </head> <body> <div class="parallelogram">我是平行四边形</div> </body> </html>
复制
效果如下:
在这个例子中,clip-path 属性被用来裁剪 div 元素的背景,使其呈现为平行四边形。polygon 函数定义了一个多边形,通过一系列的坐标来确定形状的每个顶点位置。
- 50px 0%:代表平行四边形的第一个顶点,位于顶部距离左侧 50px 的位置。
- 100% 0%:代表第二个顶点,位于右上角。
- 150px 100%:代表第三个顶点,位于底部距离左侧 150px 的位置。
- 0% 100%:代表第四个顶点,位于左下角。
通过调整这些百分比和像素值,你可以进一步定制平行四边形的形状和倾斜度。这个方法相对简单并且效果稳定。而且还可以绘制更加复杂的图形,比如绘制一个左上角缺一角且渐变背景色的矩形:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 绘制特殊矩形</title> <style> .box { width: 200px; height: 100px; background: linear-gradient(to right, #ff7e5f, #feb47b); clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 20px); line-height: 100px; text-align: center; } </style> </head> <body> <div class="box">我是文字</div> </body> </html>
复制
效果如下:
通过clip-path: polygon(),我们可以绘制各种形状(三角形、菱形等),当然,clip-path还有其他参数,像 circle()-圆,ellipse() – 椭圆 等,具体可以看 MDN教程。