css 绘制平行四边形的背景

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

方法一:transform: skewX(角度); 使元素倾斜形成平行四边形,代码如下:
html 复制代码
<!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 复制代码
<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()绘制平行四边形(个人推荐),代码如下:
html 复制代码
<!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%:代表第四个顶点,位于左下角。

通过调整这些百分比和像素值,你可以进一步定制平行四边形的形状和倾斜度。这个方法相对简单并且效果稳定。而且还可以绘制更加复杂的图形,比如绘制一个左上角缺一角且渐变背景色的矩形:

html 复制代码
<!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教程

相关推荐
我要洋人死21 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人33 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人33 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR39 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香41 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969343 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#