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

相关推荐
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic8 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端