如何制作如图所示的自定义容器？用border-radius尝试未果求助

仅用单一元素的border-radius无法实现你要的这种带内凹角的容器，因为border-radius只能生成外凸的圆角。下面提供两种可行的实现方案：

方案一：伪元素模拟内凹（兼容性好） #

这种方法通过伪元素覆盖容器的角落，配合背景色和外凸圆角，模拟出内凹效果，适配绝大多数现代浏览器及部分老版本浏览器。

HTML代码 #

<div class="custom-container">
  <p>容器内的内容示例</p>
</div>

CSS代码 #

.custom-container {
  position: relative;
  width: 320px;
  padding: 40px 20px 20px;
  background-color: #4a90e2;
  color: #ffffff;
  /* 底部设置外凸圆角 */
  border-radius: 0 0 16px 16px;
}

/* 左上角内凹伪元素 */
.custom-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  /* 使用页面背景色填充，模拟内凹 */
  background-color: #ffffff;
  border-radius: 0 0 16px 0;
}

/* 右上角内凹伪元素 */
.custom-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 0 0 0 16px;
}

方案二：clip-path 直接裁剪（代码简洁） #

使用CSS的clip-path属性直接定义容器的形状，代码更简洁，但兼容性稍差（不支持IE浏览器）。

CSS代码 #

.custom-container {
  width: 320px;
  padding: 20px;
  background-color: #4a90e2;
  color: #ffffff;
  /* 定义多边形路径，实现顶部内凹、底部外凸的效果 */
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
}

你可以根据需求和浏览器兼容性要求选择方案，调整border-radius或clip-path中的数值可改变圆角大小。

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