能否用CSS制作自定义形状按钮？左侧特殊造型按钮实现咨询

完全可以通过CSS实现你想要的效果，你之前只得到单条曲线方形按钮，大概率是border-radius的取值或者按钮宽高比例没设置对。下面给你两种实用实现方案：

方案一：固定宽高的标准半圆按钮 #

适合按钮宽度固定、仅需右侧半圆的场景，核心是让按钮宽度等于高度的一半，同时将右侧两个圆角的半径设为高度的一半：

<button class="fixed-side-btn">按钮</button>

.fixed-side-btn {
  /* 固定在屏幕左侧，垂直居中 */
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  /* 宽高1:2的比例，保证右侧是标准半圆 */
  height: 80px;
  width: 40px;
  
  border: none;
  background-color: #2196F3;
  color: #fff;
  cursor: pointer;
  
  /* 关键：右侧两个圆角设为高度的一半 */
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  
  /* 让内部文本居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

方案二：适配文本宽度的半圆按钮 #

如果按钮需要容纳变长文本，同时右侧保持半圆，直接用border-radius即可实现，无需额外伪元素：

<button class="flex-side-btn">更多操作</button>

.flex-side-btn {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  /* 高度固定，宽度由文本内容撑开 */
  height: 60px;
  padding: 0 25px 0 15px;
  
  border: none;
  background-color: #2196F3;
  color: #fff;
  cursor: pointer;
  
  /* 右侧圆角设为高度的一半，形成半圆 */
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  
  display: flex;
  align-items: center;
}

小提示 #

• 若直接写border-radius: 0 50% 50% 0，当按钮宽高比例不是1:2时，右侧会变成椭圆而非标准半圆，所以更稳妥的方式是直接写与高度一半相等的数值。
• 要加交互效果的话，直接给按钮加hover样式即可：

.fixed-side-btn:hover, .flex-side-btn:hover {
  background-color: #1976D2;
}

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