如何用CSS实现左侧文本、右侧弧形图案的小盒子布局？

嗨，我来帮你把右侧的三角形改成想要的弧形图案～

原来的代码是用border属性生成三角形，要实现弧形效果，我们可以改用border-radius来创建弧形形状，同时调整布局避免文本和弧形块重叠。下面是修改后的完整代码：

修改后的CSS代码 #

.football{ 
  width: 50%; 
  box-shadow: 0 4px 12px 4px rgba(0,0,0,0.2);
  overflow: hidden; /* 确保容器包裹内部元素 */
} 
.text-ft{
  overflow: hidden; /* 清除浮动，让容器高度自适应 */
}
.text-ft p{ 
  float:left; 
  width: calc(100% - 157px); /* 预留出右侧弧形块的宽度，避免重叠 */
  margin: 0; /* 去掉默认的p标签外边距，让布局更整齐 */
  padding: 1rem; /* 给文本添加内边距，提升可读性 */
  box-sizing: border-box;
} 
.right-shape{ 
  float:right; 
  width: 157px; 
  height: 152px; 
  background-color: #d869a7;
  /* 通过border-radius创建左侧弧形效果 */
  border-top-left-radius: 76px;
  border-bottom-left-radius: 76px;
}

修改后的HTML代码 #

<div class="football"> 
  <div class="text-ft"> 
    <p>Football is now-a-days almost a national game in Bengal. In the streets of cities, open fields of village boys and young men kick at football in all season. It is not a mere game of amusement. It is the breath of a Bengali boy.</p> 
    <div class="right-shape"></div> 
  </div> 
</div>

关键调整说明： #

• 移除了.right-shape中用于生成三角形的border属性，改用固定宽高和背景色，通过border-top-left-radius和border-bottom-left-radius（数值设为高度的一半）打造左侧弧形的效果，正好对应你想要的右侧弧形图案。
• 给文本段落p设置了width: calc(100% - 157px)，预留出右侧弧形块的宽度，避免文本和弧形块重叠。
• 添加了overflow: hidden到.football和.text-ft，确保容器能正确包裹内部的浮动元素，避免布局塌陷。
• 给文本添加了内边距，提升整体的视觉舒适度。

如果想要调整弧形的弧度，只需要修改border-radius的数值即可——数值越大，弧形越圆润；如果想要向外凸的弧形效果，可以换成border-top-right-radius和border-bottom-right-radius哦～

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