网页设计h3标题样式 + 左下角折角实现代码

我直接精准拆解你这段代码里的 h3 效果，一步一步讲清楚：文字和边框差不多长 + 左下角折角小尾巴 是怎么实现的。

一、先看效果对应的 CSS你代码里真正控制 h3 标题样式 + 左下角折角 的是这两个类：

.zit { color:#fff; background:#39c; padding:.5em; line-height:1; position:absolute; z-index:2; min-width: 2em; display:inline-block; min-height: 1em; } .zit::after { content:"Z"; position:absolute; left:.5em; bottom:-.5em; transform:rotate(30deg); display:inline-block; margin:0 .2em 0 0; z-index:-1; color:#39c; font-weight:bold; transition:all .5s; }

实际页面里的 h3 是这样写的：

<h3 class="zit">标题文字</h3>

二、为什么「文字和边框差不多长」？ 关键就这 3 句 CSS：

display:inline-block; position:absolute; width 不设置 / min-width:2em;

原理：
display:inline-block
盒子宽度 由内容撑开
文字有多长，盒子就有多宽
不会像 div 那样占满整行
position:absolute
脱离文档流
宽度完全由内容决定
没有设置 width，只给了最小宽度 min-width:2em
文字短 → 盒子跟着变短
文字长 → 盒子跟着变长
永远刚好包裹文字.

 

三、左下角那个「折角 / 小尾巴」是怎么做的？

 

不是图片！不是图片！不是图片！
它是纯 CSS 用 ::after 伪元素 + 旋转字符 Z 做出来的折角。

 

核心代码：

.zit::after { content:"Z"; /* 用字母 Z 当折角 */ position:absolute; left:.5em; bottom:-.5em; /* 放在标题底边外面 */ transform:rotate(30deg); /* 旋转 30 度形成折角 */ z-index:-1; /* 藏在标题底下 */ color:#39c; /* 跟背景同色 */ }

视觉效果原理：
主标题背景：#39c（蓝色）
伪元素 Z 旋转 30 度，颜色也是 #39c
放在底边偏左一点，视觉上就变成了左下角折角
不是图片，纯 CSS 字符 + 旋转实现
四、总结（最精简版）
1. 文字与边框等长
display:inline-block + 不设置宽度
→ 盒子自动贴合文字宽度
2. 左下角折角
.zit::after + content:"Z" + rotate(30deg)
→ 纯 CSS 旋转字符做出的折角，不是图片