带平滑圆角的CSS三角形开发求助：含图标与文本的三角形盒子实现

嘿，这个带内容的三角形盒子确实有点棘手——我之前也踩过类似的坑！不过用CSS的clip-path属性应该能完美解决你的问题，它比传统的border三角形技巧更适合容纳内容。我基于你给的HTML结构调整并写了一个可运行的示例，你可以参考下：

修正后的HTML结构 #

首先注意你的原HTML里<i>标签没有闭合，我先帮你修正了：

<div class="outer-triangle">
  <div class="inner-triangle">
    <i class="fa fa-bathtub"></i>
    <h2>Heading</h2>
    <p>This is testing for multi line paragraph. This is testing for multi line paragraph.</p>
  </div>
</div>

CSS实现代码 #

/* 外层容器：控制整体大小与居中 */
.outer-triangle {
  width: 300px; /* 可根据需求调整 */
  margin: 2rem auto;
}

/* 核心三角形容器：用clip-path定义形状，同时布局内部内容 */
.inner-triangle {
  /* 定义等腰三角形：顶部中点、左下角、右下角 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #4a90e2; /* 三角形背景色 */
  padding: 2rem 1.5rem 3rem; /* 内边距：顶部小，底部大适配三角形形状 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

/* 图标样式 */
.inner-triangle .fa-bathtub {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* 标题样式 */
.inner-triangle h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

/* 段落样式 */
.inner-triangle p {
  margin: 0;
  line-height: 1.5;
}

关键说明 #

• clip-path: polygon()是核心：通过定义三个顶点坐标来创建三角形，你可以修改坐标适配不同方向的三角形：
  • 尖朝下：polygon(50% 100%, 0% 0%, 100% 0%)
  • 尖朝左：polygon(0% 50%, 100% 0%, 100% 100%)
  • 尖朝右：polygon(100% 50%, 0% 0%, 0% 100%)
• 内边距的调整：因为三角形顶部窄、底部宽，所以给底部设置更大的内边距，避免段落文字被三角形边缘截断。
• Flex布局：让内部的图标、标题、段落垂直居中排列，保证视觉上的整齐。

如果你的目标三角形有特殊的角度或尺寸，只需要调整clip-path的坐标值和容器的宽高即可。

内容的提问来源于stack exchange，提问作者Syed Arif Iqbal