CSS金字塔柱体下方文本区块样式受父元素影响的解决求助

问题根源 #

你的核心问题来自两点：一是父元素.pyramid的clip-path会裁剪所有子元素，导致文本区块被隐藏；二是当前HTML结构中柱体与文本的对应关系混乱，父元素的flex布局、颜色等样式会被子元素继承，无法实现文本样式独立。

1. 重构HTML结构 #

将每个金字塔柱体和对应说明文本包裹在独立容器中，精准控制文本的显示/隐藏逻辑：

<div class="pyramid">
  <div class="pyramid__item">
    <div class="pyramid__section">Mind</div>
    <div class="pyramid__text">Automate your sleep tracking &amp; optimisation by using an OURA ring. Optimise your sleep &amp; wakefulness hormones. Maximise your sleep recovery. Maximise your wake-up energy. Customise KPI habits, that play the most significant role for YOUR sleep. Leverage other gadgets &amp; tools to optimise your environment for optimal sleep.</div>
  </div>
  <div class="pyramid__item">
    <div class="pyramid__section">Body</div>
    <div class="pyramid__text">这里是Body对应的说明文本</div>
  </div>
  <div class="pyramid__item">
    <div class="pyramid__section">Nutrition</div>
    <div class="pyramid__text">这里是Nutrition对应的说明文本</div>
  </div>
  <div class="pyramid__item">
    <div class="pyramid__section">Sleep</div>
    <div class="pyramid__text">这里是Sleep对应的说明文本</div>
  </div>
</div>

2. 调整CSS样式 #

• 移除父元素的clip-path，改用伪元素实现金字塔背景，避免裁剪子元素
• 给文本区块设置独立样式，重置继承属性，确保样式不受父元素干扰
• 添加点击显示/隐藏的样式逻辑：

.pyramid {
  width: 400px;
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 5px;
  position: relative;
}

/* 伪元素实现金字塔背景，不影响子元素 */
.pyramid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 160px);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background-color: rgba(62, 183, 253, 0.1);
  z-index: -1;
}

.pyramid__item {
  position: relative;
}

.pyramid__section {
  flex: 1 1 80px;
  background-color: #3EB7FD;
  box-shadow: 2px 2px 2px 0 rgba(61, 74, 62, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: background-color 0.3s;
}

.pyramid__section:nth-of-type(even) {
  background-color: lightgray;
}

.pyramid__section:hover {
  background-color: yellow;
}

/* 文本区块独立样式，完全重置继承属性 */
.pyramid__text {
  display: none;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  color: #333;
  margin-top: 10px;
  position: relative;
  z-index: 10;
}

/* 点击柱体后显示文本 */
.pyramid__item.active .pyramid__text {
  display: block;
}

3. 添加JavaScript控制逻辑 #

实现点击柱体切换对应文本的显示/隐藏：

document.querySelectorAll('.pyramid__section').forEach(section => {
  section.addEventListener('click', function() {
    const item = this.closest('.pyramid__item');
    // 可选：点击其他柱体时关闭已打开的文本
    document.querySelectorAll('.pyramid__item.active').forEach(activeItem => {
      if (activeItem !== item) activeItem.classList.remove('active');
    });
    item.classList.toggle('active');
  });
});

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