如何实现overflow:hidden反向效果，仅显示div容器外的内容？

要实现和overflow: hidden完全相反的效果——隐藏子元素在父容器内部的部分、只保留溢出到父容器外的内容，不需要复杂的Hack，两种CSS方案都可以稳定实现，兼容性覆盖绝大多数主流浏览器。 #

核心前提 #

首先必须删除.container上原有的overflow: hidden属性，这个属性会直接裁剪所有溢出父容器的内容，是实现目标效果的反向操作，父容器的overflow必须保持默认值visible。 #

方案1：CSS Mask 遮罩（通用适配，无需手动计算坐标） #

这个方案不需要关心子元素的偏移值、尺寸，只要父容器是定位上下文，就可以自动挖掉子元素和父容器重叠的区域，适配后续的样式调整。
直接给.slog-box添加以下遮罩样式即可：

.slog-box{
  /* 原有定位、尺寸、边框样式保留 */
  position: absolute;
  left: 50px;
  top: -25px;
  width: 450px;
  height: 150px;
  border: 5px solid #ff6600;

  /* 新增反向裁剪遮罩 */
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; /* 可选：避免溢出的边框遮挡外部元素交互，不影响视觉效果 */
}

实现逻辑：用两层遮罩叠加，通过异或合成模式，把元素和父容器重叠的区域挖空，只保留溢出父容器的可见部分。 #

方案2：CSS clip-path（固定布局场景，性能更优） #

如果你的slog-box偏移值、尺寸是固定的，可以用clip-path直接定义需要显示的多边形区域，渲染性能比遮罩更好，兼容性也更强。
根据当前代码里的固定偏移值（top:-25px、left:50px），直接给.slog-box添加以下裁剪规则即可：

.slog-box{
  /* 原有定位、尺寸、边框样式保留 */
  position: absolute;
  left: 50px;
  top: -25px;
  width: 450px;
  height: 150px;
  border: 5px solid #ff6600;

  /* 新增裁剪规则，只保留溢出父容器的顶部、右侧区域 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 25px,
    400px 25px,
    400px 100%,
    100% 100%
  );
}

注意：如果后续调整了slog-box的偏移、尺寸，需要同步修改clip-path里的坐标值，否则会出现裁剪错位。 #

完整可运行代码 #

<!DOCTYPE HTML>
<head>
<style>
.container {
  position: absolute;
  margin-left: 40px;
  margin-top: 20%;
  width: 450px;
  height: 150px;
  /* 已删除overflow: hidden，保持默认visible */
  border: 2px solid #0d00ff;
}

.slog-box{
  position: absolute;
  left: 50px;
  top: -25px;
  width: 450px;
  height: 150px;
  border: 5px solid #ff6600;

  /* 按需选择方案1或方案2的样式添加即可 */
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.slogan {
  position: relative;
  padding: 20px;
  margin: 0;
  font-size: 24px;
}
</style>
</head>
<body>
     <div class="container">
            <div class="slog-box"></div>
            <p class="slogan" id="slogan">
                    el rujido se escucha
                    entre las montañas
            </p>
     </div>
</body>
</HTML>

效果参考 #

• 初始未裁剪布局：
  
• 设置overflow:hidden的错误效果（内部保留、外部裁剪，和需求相反）：
  

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