前端文档教程【免费下载链接】You-need-to-know-cssCSS tricks for web developers~项目地址https://gitcode.com/gh_mirrors/yo/You-need-to-know-css点击查看免费下载在 You-need-to-know-css 的 Shapes常见形状专题中polygon.md 集中演示了六种其他多边形的纯 CSS 画法——梯形、五角星、缎带、钻石、爱心与军衔人字纹。它们不依赖任何图片或 SVG仅靠border的几何特性与transform的旋转/倾斜拼装而成。读完本文你将掌握边框三角形/梯形的构造原理、box-sizing对形状几何的关键影响以及多伪元素拼合复合图形的完整套路并能直接复制代码在项目中落地。背景知识border 形状的几何原理多边形绘制依赖两个前置属性box-sizing与transform原文档亦将二者列为背景知识。它们的核心作用分别在于box-sizing决定边框是否被计入元素的width/height。边框画形状的核心思路是利用相邻边框的 45° 斜角拼接因此必须清楚知道边框在盒子之外占了多少尺寸transform用于把若干个基本形三角形、矩形旋转或倾斜拼出五角星、爱心这类无法用一个元素直接画出的复合多边形。box-sizing决定 border 画法成败的开关polygon.md 开头有一行全局重置*{ box-sizing: border-box; }border-box会让width/height把边框与内边距包含在内这对日常布局是友好的但边框画形状恰恰依赖边框在内容盒之外的默认几何。因此示例在形状元素上显式恢复默认模式main .item div { box-sizing: content-box; }以梯形为例元素width: 80px; height: 0border: 40px solid。在content-box下实际总宽度为80 40 40 160px左右各 40px 的边框才会按预期向外延伸、形成斜边若沿用border-box边框会被压缩进 80px 内形状几何将完全变形。这一处重置里的再重置正是本示例能正确渲染的关键细节也解释了为什么全局重置后还要在形状容器上单独声明。transform把基本形拼成复合形transform的rotateZ()与skewY()在本示例中承担两类任务旋转拼合五角星由 1 个主体三角形 2 个伪元素三角形分别以rotateZ(35deg)、rotateZ(-35deg)、rotateZ(-70deg)旋转后叠放而成爱心则由两个圆角矩形以rotateZ(45deg)/rotateZ(-45deg)绕底部内角旋转拼出倾斜成型军衔人字纹用skewY(6deg)与skewY(-6deg)把左右两半矩形向中间收拢形成 V 形。先看演示仓库里的交互式多边形示例polygon.md 与中文版 zh-cn/polygon.md 都内嵌了一个 VueP 在线可运行模板vuep template#polygon_tlp/vuep与script v-pre typetext/x-template idpolygon_tlp。该仓库用 docsify 搭建文档站index.html 中引入了vue.min.js、vuep.min.js与babel.min.js均位于 libs/使得每个技巧页都能在浏览器里即时编辑、即时预览。按 README.md 的 Quick start 即可本地运行整个文档站npm install docsify-cli -g # 或 yarn global add docsify-cli docsify serve # 然后浏览器打开 http://localhost:3000打开/polygon页面即可看到六种形状并排展示的交互演示修改模板代码后效果实时刷新非常适合边改边理解各形状的几何构成。演示的外层容器同样值得留意main { width: 100%; padding: 60px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } main div.item { min-width: 199px; height: 200px; padding: 20px; border: 1px solid #f5f5f5; flex: 1; display: flex; justify-content: center; align-items: center; } main div.item:not(:nth-child(3n)):not(:last-child) { border-right-width:0; }每个.item是一个 199px 起步、等高 200px 的卡片flex: 1让卡片在换行时均匀伸展:not(:nth-child(3n)):not(:last-child)选择器把非第三列、非末位的卡片右边框置 0形成干净的分隔网格线卡片内部用 Flex 居中承载形状元素保证六种形状在不同宽度下视觉统一。六种多边形的实现与拆解梯形trapezoid.trapezoid { width: 80px; height: 0; border: 40px solid #fff; border-top: 0 solid; border-bottom: 80px solid #b4a078; }这是最经典的边框梯形元素高度为 0四边先统一声明 40px 边框再通过border-top: 0 solid将顶边清零、border-bottom: 80px加厚底边。渲染结果中彩色底边框形成梯形的大底左右白色边框因相邻边框 45° 斜角拼接而成为两条斜边顶边为 0 使小顶恰好等于内容区宽度 80px。需要说明的是示例中左右边框用#fff是因为演示页背景为白色若页面背景不是白色一般可将其换成与背景一致的颜色或transparent效果等同。五角星star-5-points.star-5-points { width: 0; height: 0; position: relative; margin: 50px 0; border: 80px solid rgba(0,0,0,0); border-top: 0 solid; border-bottom: 56px solid #b4a078; transform: rotateZ(35deg); } .star-5-points::before { content: ; width: 0; height: 0; position: absolute; top: -36px; left: -52px; border: 24px solid rgba(0,0,0,0); border-top: 0 solid; border-bottom: 64px solid #b4a078; transform: rotateZ(-35deg); } .star-5-points::after { content: ; width: 0; height: 0; position: absolute; top: 3px; left: -86px; border: 80px solid rgba(0,0,0,0); border-top: 0 solid; border-bottom: 56px solid #b4a078; transform: rotateZ(-70deg); }五角星是典型的边框三角形拼合案例。width: 0; height: 0时只给border-bottom上色、其余三边设为rgba(0,0,0,0)透明即可得到一个等腰三角形——底边宽度等于左右边框之和高度等于底边框厚度。示例用主体元素一个底边 160px8080、高 56px 的三角形rotateZ(35deg)::before伪元素一个底边 48px2424、高 64px 的小三角形旋转 -35°定位在top:-36px; left:-52px::after伪元素一个与主体等大的三角形旋转 -70°定位在top:3px; left:-86px。三个三角形在position: relative的容器内旋转叠放恰好交错成五角星的五个尖角。调整各三角形的尺寸、角度与偏移量即可得到不同比例的五角星。缎带ribbon.ribbon { width: 0; height: 80px; border: 40px solid #b4a078; border-top: 0 solid; border-bottom: 28px solid rgba(0,0,0,0); }缎带的构造与梯形相反这次保留左右和上边框高 80px 的垂直色带把底边框设为 28px 透明。透明底边框与左右彩色边框在底部形成 45° 斜角产生向下的V 形收口形似横幅/缎带的燕尾末端。border-top: 0 solid仍是为了消除顶部多余的边框厚度。钻石diamond.diamond { width: 50px; height: 0; position: relative; margin: 20px 0 82px; border: 25px solid rgba(0,0,0,0); border-top-width: 0; border-bottom-color: #b4a078; } .diamond::after { content: ; width: 0; height: 0; position: absolute; top: 25px; left: -25px; border: 50px solid rgba(0,0,0,0); border-top: 70px solid #b4a078; border-bottom-width: 0; }钻石菱形由两个反向的三角形拼接而成主体元素border-bottom-color上色、左右透明得到向上指的三角形上半个菱形::after伪元素border-top: 70px上色、其余透明得到向下指的三角形下半个菱形定位在top:25px; left:-25px恰好与上半部分尖对尖拼接。注意写法上的差异主体用border-top-width: 0清顶边伪元素用border-bottom-width: 0清底边且伪元素边框整体更宽50px以匹配主体三角形的宽度保证接缝对齐。爱心heart.heart { content: ; display: block; width: 100px; min-height: 80px; position: relative; transform-origin: 50% 50% 0; } .heart:before { content: ; display: block; width: 50px; height: 80px; position: absolute; top: 0; left: 50px; border-radius: 50px 50px 0 0; background: #b4a078; transform: rotateZ(-45deg); transform-origin: 0 100% 0; } .heart:after { content: ; display: block; width: 50px; height: 80px; position: absolute; top: 0; left: 0; border-radius: 50px 50px 0 0; background: #b4a078; transform: rotateZ(45deg); transform-origin: 100% 100% 0; }爱心不再依赖边框而是两个上圆下方的矩形旋转重叠两个伪元素都是50px × 80px、border-radius: 50px 50px 0 0的圆顶矩形:before位于右侧left: 50pxtransform-origin: 0 100%左下角为旋转轴心旋转 -45°:after位于左侧left: 0transform-origin: 100% 100%右下角为轴心旋转 45°。两个矩形绕底部内角旋转后圆顶在上方形成左右两个心瓣矩形底部在下方汇聚成心尖组合出标准心形。transform-origin在这里是决定旋转后能否对齐拼合的关键参数。军衔人字纹army-chevron.army-chevron { width: 200px; height: 60px; position: relative; margin: 0 0 6px; padding: 12px; text-align: center; } .army-chevron::before { content: ; width: 51%; height: 100%; position: absolute; top: 0; left: 0; background: #b4a078; transform: skewY(6deg); } .army-chevron::after { content: ; width: 50%; height: 100%; position: absolute; top: 0; right: 0; background: #b4a078; transform: skewY(-6deg); }人字纹类似军衔臂章的 V 形章由两个被剪切倾斜的半矩形拼成左半部分skewY(6deg)、右半部分skewY(-6deg)两者相向倾斜、在中间交会形成 V 形尖角。细节上左侧宽度取51%而右侧取50%略微重叠以消除相邻两半之间可能出现的缝隙。容器预留padding: 12px与text-align: center如需在纹章中间放置文字也留有空间。完整可运行代码把 polygon.md 中的容器与六种形状整合在一起即得到一份可直接复制运行的完整示例形状颜色统一使用#b4a078该配色取自仓库文档约定的网易严选设计色详见 introduce.mdstyle *{ box-sizing: border-box; } main { width: 100%; padding: 60px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } main div.item { min-width: 199px; height: 200px; padding: 20px; border: 1px solid #f5f5f5; flex: 1; display: flex; justify-content: center; align-items: center; } main div.item:not(:nth-child(3n)):not(:last-child) { border-right-width:0; } main .item div { box-sizing: content-box; } .trapezoid { width: 80px; height: 0; border: 40px solid #fff; border-top: 0 solid; border-bottom: 80px solid #b4a078; } .star-5-points { width: 0; height: 0; position: relative; margin: 50px 0; border: 80px solid rgba(0,0,0,0); border-top: 0 solid; border-bottom: 56px solid #b4a078; transform: rotateZ(35deg); } .star-5-points::before { content: ; width: 0; height: 0; position: absolute; top: -36px; left: -52px; border: 24px solid rgba(0,0,0,0); border-top: 0 solid; border-bottom: 64px solid #b4a078; transform: rotateZ(-35deg); } .star-5-points::after { content: ; width: 0; height: 0; position: absolute; top: 3px; left: -86px; border: 80px solid rgba(0,0,0,0); border-top: 0 solid; border-bottom: 56px solid #b4a078; transform: rotateZ(-70deg); } .ribbon { width: 0; height: 80px; border: 40px solid #b4a078; border-top: 0 solid; border-bottom: 28px solid rgba(0,0,0,0); } .diamond { width: 50px; height: 0; position: relative; margin: 20px 0 82px; border: 25px solid rgba(0,0,0,0); border-top-width: 0; border-bottom-color: #b4a078; } .diamond::after { content: ; width: 0; height: 0; position: absolute; top: 25px; left: -25px; border: 50px solid rgba(0,0,0,0); border-top: 70px solid #b4a078; border-bottom-width: 0; } .heart { content: ; display: block; width: 100px; min-height: 80px; position: relative; transform-origin: 50% 50% 0; } .heart:before { content: ; display: block; width: 50px; height: 80px; position: absolute; top: 0; left: 50px; border-radius: 50px 50px 0 0; background: #b4a078; transform: rotateZ(-45deg); transform-origin: 0 100% 0; } .heart:after { content: ; display: block; width: 50px; height: 80px; position: absolute; top: 0; left: 0; border-radius: 50px 50px 0 0; background: #b4a078; transform: rotateZ(45deg); transform-origin: 100% 100% 0; } .army-chevron { width: 200px; height: 60px; position: relative; margin: 0 0 6px; padding: 12px; text-align: center; } .army-chevron::before { content: ; width: 51%; height: 100%; position: absolute; top: 0; left: 0; background: #b4a078; transform: skewY(6deg); } .army-chevron::after { content: ; width: 50%; height: 100%; position: absolute; top: 0; right: 0; background: #b4a078; transform: skewY(-6deg); } /style main div classitemdiv classtrapezoid/div/div div classitemdiv classstar-5-points/div/div div classitemdiv classribbon/div/div div classitemdiv classdiamond/div/div div classitemdiv classheart/div/div div classitemdiv classarmy-chevron/div/div /main浏览器支持polygon.md 在文末为两个基础特性内嵌了 caniuse 支持数据box-sizingcss3-boxsizing本示例所有形状的几何计算都依赖它是现代浏览器均已支持的基础属性transformtransforms3d示例中五角星、爱心、人字纹都使用了rotateZ/skewY变换属于 transform 的 2D 能力范畴。此外introduce.md 中明确说明文档内示例未额外添加浏览器前缀建议在 Chrome、Firefox 等主流浏览器中查看投入生产环境时可使用 Autoprefixer 这类工具自动补齐前缀以处理兼容性。延伸阅读仓库中更多形状技巧本专题在 _sidebar.md 中被归入 Shapes常见形状分类除 polygon.md 外仓库还提供了多条可直接对照的形状方案parallelogram.md平行四边形的三种实现——嵌套元素skewX反相修正、伪元素背景倾斜推荐以及基于clip-path: polygon()的菱形图片裁剪含 hover 过渡动画bevel-corners.md切角八角形效果其中clip-path: polygon(...)用顶点坐标精确切出斜角ellipse.md借助border-radius的/语法实现圆、半圆、半椭圆与四分之一圆pie-chart.md用渐变、旋转动画与 SVGstroke-dasharray绘制饼图与多边形同属形状章节可相互印证transform旋转在图形绘制中的灵活用法。从中可以总结出一条通用经验能用border几何解决的基础形三角形、梯形优先用边框画需要复合拼接或裁剪的复杂形五角星、爱心、切角图片则组合transform旋转/倾斜或clip-path: polygon()顶点坐标完成。这正是 polygon.md 与其他形状文档共同构成的完整纯 CSS 造形方法论。赞分享前端文档教程【免费下载链接】You-need-to-know-cssCSS tricks for web developers~项目地址https://gitcode.com/gh_mirrors/yo/You-need-to-know-css点击查看免费下载相关推荐VisionReward-Image清华团队发布多维度视觉评估模型重构AI审美标准VisionReward Image清华团队发布多维度视觉评估模型重构AI审美标准 导语 清华大学团队推出的VisionReward Image模型通过将前端文档教程You-need-to-know-css 实战四种纯 CSS 方案实现切角效果bevel cornersYou need to know css 实战四种纯 CSS 方案实现切角效果bevel corners 切角bevel corners / cutou前端文档教程LeetCode《面试题 01.03. URL 化》解法全解doocs/leetcode 仓库中空格替换 %20 的多语言实现剖析LeetCode《面试题 01.03. URL 化》解法全解doocs/leetcode 仓库中空格替换 %20 的多语言实现剖析 导读 本文以 lcci/0前端文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考