如何用CSS实现向外弯曲的边角效果？

要实现灰色视频区的边角向外弯曲效果，不能直接用border-radius（它只能实现向内凹陷），我们可以通过给灰色区域添加白色径向渐变遮罩的方式，模拟出向外弯曲的视觉效果，同时调整周围白色块的样式来完成衔接。

修改后的完整代码 #

HTML结构无需改动，保持原布局即可，以下是调整后的CSS代码：

.top-hero {
  position: relative;
  overflow: hidden; /* 防止渐变超出容器范围 */
}

.top-hero__top-left {
  background: #fff;
  padding: 0 20px 20px 0;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.top-hero__top-right {
  background: #fff;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.top-hero__content {
  padding-top: 50%;
  background: lightgrey;
  position: relative;
  /* 用三个径向渐变创建白色圆形遮罩，模拟向外弯曲的边角 */
  background-image: 
    radial-gradient(circle at top left, transparent 10px, #fff 10px),
    radial-gradient(circle at top right, transparent 10px, #fff 10px),
    radial-gradient(circle at bottom left, transparent 10px, #fff 10px);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left;
}

.top-hero__bottom-left {
  min-height: 100px;
  background: #fff;
  position: absolute;
  width: 30%;
  z-index: 2;
  bottom: 0;
  left: 0;
}

.button {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  text-decoration: none;
  background: lime;
  padding: 15px 35px;
  line-height: 1;
  display: inline-block;
}

实现原理 #

1. 移除白色块的圆角：删掉所有白色块的border-radius，让它们的边缘保持直角，为后续的弯曲衔接做准备。
2. 径向渐变模拟外弯效果：在灰色的.top-hero__content上，通过三个径向渐变分别在左上角、右上角、左下角创建白色圆形遮罩：
   • 渐变规则transparent 10px, #fff 10px表示：从圆心向外10px范围透明，10px以外为白色，这样会在灰色区域的角上形成一个10px半径的“缺口”，视觉上就像灰色区域的边角向外弯曲。
   • 通过background-position定位每个渐变到对应角落，background-size限制渐变大小刚好覆盖缺口区域。
3. 容器溢出隐藏：给父容器.top-hero添加overflow: hidden，防止渐变的白色部分超出容器显示。

这种方式不会影响灰色区域内视频的嵌入，完全满足你的需求。

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