用transform: skew()最快但文字会歪；要文字正、边框斜，需嵌套子元素反向矫正；纯形状推荐clip-path: polygon()，不干扰布局且兼容现代浏览器。
直接用 transform: skew() 最快，但文字会跟着歪；要文字正、边框斜，得套一层子元素反向矫正。真要纯边框平行四边形（比如按钮外轮廓），clip-path: polygon() 更干净，且不干扰内部流式布局。
skew() 倾斜整个盒子：简单但文字也歪
这是最常用也最容易上手的方式，本质是把矩形沿 X 或 Y 轴“拉斜”：
-
skewX(20deg)只动 X 轴，适合做左/右倾的平行四边形 -
skewY(-15deg)只动 Y 轴，倾斜感更“竖直”，常用于标签角标 - 两个参数都写，如
skew(10deg, -5deg)，容易失控，一般不用 - IE9+ 支持，但旧版 Safari 需加
-webkit-transform
示例：.parallelogram { width: 200px; height: 80px; background: #4a90e2; transform: skewX(-25deg); } —— 整个 div 和里面的文字都会左斜 25°。
嵌套子元素反向矫正：让文字保持水平
只要父容器斜、内容正，就用两层 DOM + 相反的 transform 抵消：
- 外层
.parallelogram做skewX(-25deg) - 内层
.content做skewX(25deg)，把文字“扳回来” - 注意：不能只靠
transform，还得设display: inline-block或flex，否则子元素可能塌陷或换行异常 - 如果用了
line-height居中，矫正后需检查是否仍生效（有时会因 transform 导致基线偏移）
关键结构：
.parallelogram { transform: skewX(-25deg); }
.parallelogram .content { transform: skewX(25deg); display: inline-block; }
clip-path 绘制纯形状：不扰动文档流，适合背景/装饰
clip-path: polygon() 是现代方案，直接裁出平行四边形区域，文字、边框、背景全在裁剪范围内，天然正向：
- 四个顶点按顺时针顺序写，例如
polygon(30px 0%, 100% 0%, 70px 100%, 0% 100%) - 第一点和第三点的 X 差值决定“斜度”，越大越扁；Y 值保持 0% 和 100% 就能保直边
- 不支持 IE，Firefox 54+、Chrome 55+、Safari 13.1+ 均可用；移动端 iOS 13.4+ 安全
- 优势是：不影响
border渲染、可配合background-image、hover 动画更稳定
示例：.parallelogram { width: 200px; height: 80px; background: #e74c3c; clip-path: polygon(20px 0%, 100% 0%, 80px 100%, 0% 100%); }
border 技巧绘制单边斜角：仅限无内容的装饰块
用 border 的三角形原理拼接，适合做小图标、箭头、无交互的角标：
- 核心是控制四条边框颜色和宽度，例如
border-left: 40px solid transparent; border-top: 40px solid #3498db; - 平行四边形需要两个非透明边 + 两个透明边，再配合
width控制底边长度 - 缺点明显：无法设置内边距、不能放文字、hover 区域不准、加
border外边框会破坏形状 - 仅建议用于 CSS Sprite 类场景，或作为伪元素
::before的辅助图形
典型写法：
.parallelogram::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0; height: 0;
border-left: 30px solid transparent;
border-right: 0 solid transparent;
border-top: 60px solid #2ecc71;
border-bottom: 60px solid #2ecc71;
}
真正上线时优先选 clip-path：它不改变盒模型、不干扰文本流、动画表现一致；只有需要兼容 IE11 或必须用伪类生成图形时，才退回到 skew 套娃方案。别低估 skew 对 position: absolute 子元素定位的影响——它会让 top/left 计算基准变模糊，调试时容易卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
