嘿，我来给你捋捋不用图片实现这个效果的最优方案！先看你提供的效果示例：

不用图片的话，CSS伪元素+border-radius的组合是最灵活、性能友好且兼容性强的选择，具体实现思路和代码如下：

• 核心逻辑：用主容器承载核心内容，通过两个伪元素（:before和:after）模拟左右两侧的弯曲边框部分，配合border-radius打造弧度，再通过绝对定位让伪元素和主容器无缝拼接，完全不用依赖图片资源。
• 可复用代码示例：

/* 主容器：负责承载内容和基础直线边框 */
.contour-container {
  position: relative;
  width: 320px;
  height: 220px;
  background: #ffffff;
  border-bottom: 2px solid #222;
  border-left: 2px solid #222;
  border-right: 2px solid #222;
  margin-top: 45px; /* 为顶部弯曲部分预留空间 */
  padding: 20px;
}

/* 顶部左侧弯曲轮廓 */
.contour-container:before {
  content: "";
  position: absolute;
  top: -45px;
  left: -2px;
  width: 50%;
  height: 45px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  border-top-right-radius: 45px;
  background: #ffffff; /* 覆盖背景，避免透出下方内容 */
}

/* 顶部右侧弯曲轮廓 */
.contour-container:after {
  content: "";
  position: absolute;
  top: -45px;
  right: -2px;
  width: 50%;
  height: 45px;
  border-top: 2px solid #222;
  border-left: 2px solid #222;
  border-top-left-radius: 45px;
  background: #ffffff;
}

如果你的轮廓是其他方向（比如底部弯曲），只需要调整伪元素的定位、border-radius的方向以及主容器的边框设置就行。另外，clip-path也能实现类似效果，但伪元素方案对旧浏览器的兼容性更好，也更容易微调弧度和边框粗细。

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