能否用纯CSS创建弧形网站菜单栏？求指定形状的CSS代码

完全可以用纯CSS做出图里的形状，给你两种实用的实现方法：

方法一：活用border-radius多值设置 #

如果你的目标是左侧带大圆角、其余直角的样式（和图中匹配），直接用border-radius的多值语法就能搞定，代码如下：

.custom-shape {
  width: 220px;
  height: 110px;
  background-color: #ffffff;
  /* 左上角、左下角设为55px圆角，右上角、右下角设为0 */
  border-radius: 55px 0 0 55px;
}

要是需要更灵活的非对称圆角，还可以给border-radius添加垂直半径设置，精准控制每个角的弧度：

.custom-shape {
  /* /前是水平方向圆角半径，/后是垂直方向圆角半径，顺序为左上、右上、右下、左下 */
  border-radius: 60px 0 0 60px / 110px 0 0 110px;
}

方法二：用clip-path定义自定义形状 #

如果border-radius满足不了更复杂的形状需求，试试clip-path来绘制自定义轮廓：

.custom-shape {
  width: 220px;
  height: 110px;
  background-color: #ffffff;
  /* 在元素左侧绘制一个居中的半圆形裁剪区域，和图中样式匹配 */
  clip-path: ellipse(55px 50% at left center);
}

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