如何为使用径向渐变的div左右两侧添加半圆并保留红色背景？

要实现这个效果，只需调整径向渐变的语法，配合底层红色背景，就能让div左右两侧出现半圆，整体保持红色。直接看修正后的代码：

CSS 代码 #

.container {
  width: 160px;
  height: 58px;
  /* 可保留虚线边框查看元素范围，不需要则删除 */
  /* border: 1px dotted red; */
  background: 
    radial-gradient(circle at left center, red 29px, transparent 29px),
    radial-gradient(circle at right center, red 29px, transparent 29px),
    red;
}

HTML 代码 #

<div class='container'>
</div>

关键说明 #

• 用circle指定径向渐变的形状为圆形，at left center/at right center把圆心分别定位在div的左侧、右侧中心位置。
• red 29px, transparent 29px是颜色断点：从圆心向外29px（刚好是div高度的一半，58/2）的范围填充红色，超出部分设为透明，这样就形成了半圆。
• 最后叠加的red是底层背景色，用来填充div中间区域，保证整体颜色统一。

设置完成后，div左右两侧会出现完美贴合高度的半圆，整个元素背景为红色。

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