如何在CSS3中实现文本沿斜线对齐（非倾斜文本）

嘿，针对你要实现内容沿斜线对齐（带内边距）的需求，我给你提供一个不用文本倾斜、且完全响应式的方案，完美适配你的灰色斜线背景！

核心思路：用CSS shape-outside 实现文本绕排 #

这个属性专门用于控制文本如何围绕元素排列，刚好能让内容贴合斜线边缘，而且不需要嵌套旋转div，完全解决响应式问题。

完整代码示例 #

HTML 结构（仅新增一个形状定义元素）

<body> 
  <div class="shape"></div>
  <div class="contentIntrotext"> 
    Labore facere nam et sunt fugiat dolores quibusdam. Vero ratione optio culpa maiores blanditiis ipsa odit rerum. Temporibus sed ea qui quo omnis. Qui modi nemo ea illo et voluptates facilis voluptatem. Aliquam minima nobis ut iusto. Rerum nihil ut voluptas doloremque harum placeat maiores. Libero nesciunt molestiae est. In error quasi iure voluptate qui est harum eos. Quidem quia amet ratione eum repellat iusto ut aperiam. Vero inventore quae possimus ut voluptate quia ut. Quis quae aut aut occaecati quaerat distinctio quia. Quia facilis est sunt et molestiae impedit esse. Velit pariatur rerum in. Autem neque et quibusdam ea omnis et accusamus. Alias adipisci ducimus rem dolores iusto ad veniam rerum 
  </div> 
</body>

CSS 样式（调整背景为响应式+添加文本绕排逻辑）

body {
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* 灰色斜线背景：改用vh单位实现完全响应式 */
body:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  border-top: 100vh solid #f7f7f7; /* 高度占满视口 */
  border-left: 85vh solid transparent; /* 斜线角度和你原来的一致 */
  z-index: -1;
}

/* 定义文本绕排的形状元素 */
.shape {
  float: right;
  width: 85vh; /* 和背景的border-left宽度匹配，保证角度一致 */
  height: 100vh;
  /* 用多边形定义形状：文本会绕着这个多边形排列 */
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  margin-right: -1px; /* 消除形状和边缘的微小间隙 */
  /* 可选：添加透明红线参考线，和你要的效果一致 */
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px));
}

.contentIntrotext {
  padding: 2rem; /* 设置你需要的内边距 */
  line-height: 1.6;
  max-width: 100%;
}

方案优势 #

• 完全响应式：所有尺寸用vh单位，随着视口大小自动调整斜线角度和文本排列
• 无需文本倾斜：避免了文本变形的问题，保持内容可读性
• 灵活调整：修改border-left的数值可以轻松改变斜线角度，shape-outside会自动匹配
• 内边距可控：直接给.contentIntrotext设置padding即可，不影响斜线对齐效果

如果需要兼容更旧的浏览器，也可以考虑用CSS Grid结合clip-path的方案，但shape-outside是现代浏览器下最简洁高效的选择。

内容的提问来源于stack exchange，提问作者goosmaster