如何用CSS创建一侧边缘不规则的矩形容器？

你需要创建一个单侧边缘不规则的矩形父div，用来承载内部子元素，基于你提供的初始代码，这里给你几种实用的实现方案：

方案一：用clip-path直接裁剪容器形状 #

这种方法简单直接，通过裁剪容器本身来实现不规则边缘，适合简单的几何不规则形状。

#myelement {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFD580;
  height: 200px;
  /* 自定义右侧不规则路径，坐标可按需调整 */
  clip-path: polygon(0 0, 90% 0, 100% 20%, 90% 40%, 100% 60%, 90% 80%, 100% 100%, 0 100%);
}

<div id="myelement">
  Hello world
</div>

clip-path: polygon()里的每一组数值代表一个坐标点（x百分比, y百分比），你可以修改这些数值来调整不规则边缘的起伏和形状。

方案二：伪元素+背景渐变模拟边缘 #

这种方法不会裁剪容器内部内容，适合需要子元素正常延伸，或者想要更灵活纹理的场景。

#myelement {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFD580;
  height: 200px;
  position: relative;
  /* 给右侧伪元素留出空间 */
  padding-right: 40px;
  overflow: hidden;
}

#myelement::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  /* 用渐变模拟锯齿状边缘，也可以换成自定义纹理图片 */
  background: linear-gradient(135deg, transparent 30%, #FFD580 30%, #FFD580 70%, transparent 70%);
  background-size: 20px 40px;
}

<div id="myelement">
  Hello world
</div>

你可以把伪元素的background换成实际的不规则边缘图片，实现更复杂的视觉效果。

方案三：SVG背景实现高精度不规则边缘 #

如果需要复杂的曲线或自定义形状，用SVG背景是最佳选择，精度更高，也更容易调整。

#myelement {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  /* 内嵌SVG作为右侧背景，fill颜色和容器底色一致 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 200"><path d="M0,0 Q20,20 0,40 Q20,60 0,80 Q20,100 0,120 Q20,140 0,160 Q20,180 0,200" fill="%23FFD580"/></svg>') right top no-repeat;
  background-color: #FFD580;
  padding-right: 40px;
}

<div id="myelement">
  Hello world
</div>

你可以修改SVG里的path参数来绘制任意形状的边缘，完全自定义你的不规则效果。

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