如何让三角形形状div的内容适配其形状完整显示？

问题根源 #

1. 原容器未设置明确尺寸，width:100%和height:100%无父容器约束，导致布局空间异常。
2. 同时使用border和clip-path实现三角形，两者冲突挤占文本空间。
3. 标题字体尺寸过大，超出容器容纳范围直接导致截断。
4. 子标题背景色块未被裁剪，超出三角形区域。

方案一：内容适配固定尺寸三角形容器 #

此方案适合需要固定三角形大小的场景，调整文本布局适配容器：

body { 
  background-color: grey; 
  margin: 0;
  padding: 2rem;
}
.text-wrapper {
  width: 600px;
  height: 500px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: red;
  text-align: center;
  color: white;
  overflow: hidden;
  padding: 2rem 4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.main-header {
  color: #256D85;
  font-size: 3rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 1rem;
}

.sub-header {
  color: #26B6E8;
  background-color: #06283D;
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  clip-path: inherit;
}

.text-wrapper p:last-child {
  font-size: 1.2rem;
  max-width: 80%;
  margin: 0;
}

<div class="text-wrapper">
  <p class="main-header">Text header</p>
  <p class="sub-header">Text sub-header</p>
  <p>description here</p>
</div>

修改要点

• 给容器设置明确宽高，用background-color替代border实现三角形，避免额外空间占用。
• 用box-sizing: border-box和padding控制文本与三角形边缘的距离。
• Flex布局优化文本垂直排列，缩小字体适配容器。
• 子标题继承clip-path，让背景色块适配三角形形状。

方案二：容器适配文本内容 #

此方案适合文本长度不确定的场景，容器自动调整大小包裹内容，用伪元素构建三角形背景：

body { 
  background-color: grey; 
  margin: 0;
  padding: 2rem;
}
.text-wrapper {
  display: inline-block;
  position: relative;
  text-align: center;
  color: white;
  padding: 2rem 4rem 3rem;
}

.text-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: red;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  z-index: -1;
}

.text-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 50%);
  background-color: red;
  z-index: -1;
}

.main-header {
  color: #256D85;
  font-size: 3rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 1rem;
}

.sub-header {
  color: #26B6E8;
  background-color: #06283D;
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  display: inline-block;
}

.text-wrapper p:last-child {
  font-size: 1.2rem;
  margin: 0;
}

修改要点

• 容器设为inline-block，根据内容自动调整宽度。
• 用前后伪元素拼接出三角形形状，放在文本下方作为背景。
• 子标题设为inline-block，让背景色块仅包裹文本内容。

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