如何用border-radius制作目标曲线元素？及曲线转直线的实现方法

DevOps 小满

2026-8-11

问题解答

1. 能用border-radius做出图里的曲线元素吗？

可以。你提供的图是一个橙色矩形，顶部右侧带有一段向下的圆弧，其余边缘平直，这个效果完全可以用border-radius实现，关键是用它的水平/垂直半径拆分语法（水平半径/垂直半径），精准调整单个角的弯曲形态。

具体方法：

border-radius可以按「左上右上右下左下」的顺序给四个角单独设半径，每个角还能拆分成水平和垂直两个方向的半径值。针对目标效果：

只给右上角设置圆角，其他三个角保持0（平直）；
右上角的水平半径设为元素的宽度（或足够大的值，保证圆弧平滑），垂直半径设为元素的高度，这样就能形成贴合右侧的向下圆弧。

实现代码：

.box {
  width: 500px;
  height: 100px;
  background-color: #FF7C07;
  /* 格式：四个角的水平半径 / 四个角的垂直半径 */
  border-radius: 0 500px 0 0 / 0 100px 0 0;
}

<div class="box"></div>

2. 怎么把元素从轻微弯曲调成直线？

要让弯曲的边缘变直，只需要逐渐减小右上角的垂直半径值就行：

垂直半径越大，弯曲程度越强；
慢慢把它改成50px、20px，弯曲会越来越弱；
当垂直半径设为0时，边缘就完全平直了。

如果要做动态过渡效果，可以用CSS动画：

.box {
  width: 500px;
  height: 100px;
  background-color: #FF7C07;
  /* 初始弯曲状态 */
  border-radius: 0 500px 0 0 / 0 100px 0 0;
  /* 动画：2秒内变直，停在最终状态 */
  animation: flatten 2s forwards;
}

@keyframes flatten {
  to {
    /* 把右上角垂直半径改成0 */
    border-radius: 0 500px 0 0 / 0 0 0 0;
  }
}