如何实现容器的指定造型？border-radius、clip-path是否适用？

从你提供的容器样式来看，顶部是圆角、底部右侧带斜切，下面给你两种实用的实现方案：

方案一：用 clip-path 直接定义形状 #

clip-path 是最直接的方式，能精准控制容器的可见区域，完美适配这种圆角+斜切的组合：

.container {
  width: 300px;
  height: 150px;
  background: #ffffff;
  /* 多边形坐标：左上、右上、右下斜切点、左下 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 100%);
  border-radius: 12px 12px 0 0; /* 给顶部添加圆角 */
}

你可以调整polygon里的100% 70%参数来改变斜切的角度和位置，数值越大，斜切越平缓。

方案二：伪元素 + border-radius 兼容方案 #

如果需要兼容旧浏览器（比如IE），可以用伪元素模拟斜切效果，同时保留border-radius的圆角：

.container {
  position: relative;
  width: 300px;
  height: 150px;
  background: #ffffff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.container::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 40%;
  background: #你的页面背景色; /* 必须和容器外的背景色一致 */
  transform: skewY(-10deg);
  transform-origin: bottom right;
}

这种方法通过斜切的伪元素覆盖容器底部右侧，视觉上形成斜切效果，不会裁切容器内的内容。

两种方案的适用场景 #

• clip-path：代码简洁，形状调整灵活，但仅支持现代浏览器，容器内的内容会跟着形状被裁切。
• 伪元素方案：兼容性更好，内容不受影响，但需要匹配外部背景色，适合背景单一的页面。

内容的提问来源于stack exchange，提问作者Andrei-Cătălin Postolache