如何用CSS创建带顶部中间凹边的盒子及圆形元素

一、顶部带凹边的盒子实现 #

方法1：使用clip-path直接剪裁 #

通过剪裁路径可以快速实现顶部中间的凹边效果，兼容性较好且调整灵活：

.box {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 2px solid #333;
  /* 定义剪裁路径，中间向下凹出弧度 */
  clip-path: polygon(
    0 0, 
    calc(50% - 25px) 0, 
    50% 12px, 
    calc(50% + 25px) 0, 
    100% 0, 
    100% 100%, 
    0 100%
  );
}

• 修改calc(50% - 25px)/calc(50% + 25px)中的25px，可以调整凹边的宽度
• 修改50% 12px中的12px，可以调整凹边的深度

方法2：结合径向渐变与伪元素 #

如果需要更圆润的凹边，可用径向渐变模拟顶部边框的缺口：

.box {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 2px solid #333;
  border-top: none;
  position: relative;
  margin-top: 12px;
}

.box::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  /* 径向渐变生成中间透明、两侧有边框的效果 */
  background: radial-gradient(
    circle at center, 
    transparent 25px, 
    #333 25px, 
    #333 100%
  );
}

二、CSS实现圆形元素 #

圆形元素的实现非常简单，只需满足两个核心条件：宽高相等，border-radius设为50%：

.circle {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  /* 可选：添加边框、阴影等样式优化视觉 */
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

如果需要在圆形内放置文字或图标，可通过display: flex配合justify-content和align-items实现内容居中。

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