如何为DIV元素创建非对称圆角侧边？

嘿，我懂你想要的那种非对称侧边圆角效果！你当前用的border-bottom-left-radius: 80%50px; border-bottom-right-radius: 30%30px;写法思路是对的，但百分比值是基于元素的宽高计算的，这会导致圆角形状随元素尺寸变化而变形，很难精准匹配你想要的效果。

下面给你两种靠谱的实现方案，你可以根据需求选择：

方案一：精准控制border-radius的椭圆半径 #

不用百分比，而是明确指定圆角的水平半径和垂直半径，这样能精准控制圆角的形状，避免比例变形：

.asymmetric-rounded-div {
  width: 320px; /* 可根据你的需求调整 */
  height: 220px; /* 可根据你的需求调整 */
  background-color: #2563eb;
  /* 左下圆角：水平半径130px，垂直半径90px；右下圆角：水平半径45px，垂直半径45px */
  border-bottom-left-radius: 130px 90px;
  border-bottom-right-radius: 45px 45px;
}

原理说明 #

border-[方向]-radius: [水平半径] [垂直半径] 这个写法可以创建椭圆圆角，水平半径控制圆角在水平方向的弧度，垂直半径控制垂直方向的弧度。你可以慢慢调整这两个数值，直到完全匹配你预期的侧边形状。

方案二：用clip-path实现自定义形状 #

如果需要更极致的非对称效果，clip-path是更灵活的选择，它可以直接定义元素的可见区域：

.custom-shape-div {
  width: 320px;
  height: 220px;
  background-color: #2563eb;
  clip-path: polygon(
    0 0, /* 左上角 */
    100% 0, /* 右上角 */
    100% calc(100% - 45px), /* 右侧圆角的顶部起点 */
    calc(100% - 45px) 100%, /* 右下角圆角端点 */
    130px 100%, /* 左下角圆角端点 */
    0 calc(100% - 90px) /* 左侧圆角的顶部起点 */
  );
}

原理说明 #

clip-path: polygon() 通过定义一系列坐标点来绘制元素的轮廓，每个点的x和y值可以用固定像素或百分比。你可以调整每个坐标的数值，自由定制侧边的弧度和形状，完全不受元素宽高比例的限制。

两种方案都能实现你想要的效果：如果只是简单的椭圆非对称圆角，方案一更简洁；如果需要更复杂的自定义侧边，方案二更合适。你可以根据自己的实际需求调整数值哦！

内容的提问来源于stack exchange，提问作者A. Diaz