css 绘制平行四边形的背景

凹凸曼打不赢小怪兽

于 2024-08-07 23:26:25 发布

阅读量368

点赞数 16

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/brilliantSt/article/details/140920700

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

开发过程中，常常会有平行四边形的背景色需求，这里展示两种常用的方法：

方法一：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>

代码效果如下：
效果1

可以看到，平行四边形出来了，但是里面的文字也跟着倾斜了，这是因为这个是倾斜的整个盒子，里面的内容自然也会跟着倾斜，如果想要里面的内容正常展示，里面的内容需要反方向的倾斜，代码如下：

<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>

效果如下：

效果2

方法二：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>

效果如下：
效果3

在这个例子中，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>