如何用CSS实现左右双区块与文字环绕？能否不改HTML实现指定红色设计？

核心实现思路 #

借助CSS浮动属性配合伪元素，在不改动原有HTML结构的前提下生成左右两个区块，同时利用shape-outside优化文字环绕的贴合度。

代码示例 #

假设你的文本容器类名为text-container，CSS代码如下：

.text-container {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 左侧红色区块 */
.text-container::before {
  content: "";
  float: left;
  width: 160px;
  height: 220px;
  margin: 0 18px 18px 0;
  background-color: #ff3333;
  /* 让文字严格贴合区块边缘 */
  shape-outside: inset(0 0 0 0);
}

/* 右侧红色区块 */
.text-container::after {
  content: "";
  float: right;
  width: 160px;
  height: 220px;
  margin: 0 0 18px 18px;
  background-color: #ff3333;
  shape-outside: inset(0 0 0 0);
}

关键细节说明 #

• 伪元素::before/::after：无需添加新HTML标签，直接生成左右两个红色区块元素。
• float属性：让区块脱离常规文档流，触发文字自动环绕效果。
• shape-outside：如果需要实现圆角、不规则形状的环绕，可将inset替换为circle()/polygon()等函数，进一步优化文字与区块的贴合度。
• 调整width/height/margin参数，可精准匹配你需要的区块尺寸和间距。

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