使用HTML/CSS实现固定尺寸半圆与全宽矩形的组合布局

嘿，我懂你想要的效果啦——把固定尺寸的半圆和全宽矩形拼成一个整体区域，再给这个区域加上纹理背景，现在的红色只是临时占位，要换成透明对吧？

你当前用多层背景模拟了半圆的红色区域，但其实我们可以更直接地通过clip-path来定义这个半圆+矩形的形状，然后给这个形状应用纹理背景，这样就能完美实现你要的效果。

推荐实现代码 #

.u-bg-blue-over-chevrons {
  /* 用clip-path定义顶部半圆+矩形的形状，半径50px和你原来的设置对应 */
  clip-path: polygon(0 50px, 50% 0, 100% 50px, 100% 100%, 0 100%);
  /* 保留你原来的纹理背景+半透明蓝色层 */
  background: 
    radial-gradient(rgba(86, 117, 143, 0.1), rgba(86, 117, 143, 0.1)),
    white url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%23d6d6d6' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-position: center, center top;
  background-repeat: repeat, repeat;
  background-size: cover, auto auto;
  height: 100vh;
  width: 100%;
}

<div class="u-bg-blue-over-chevrons"></div>

关键调整说明 #

• clip-path定义形状：通过多边形路径直接把元素裁剪成「顶部半圆弧形+下方全宽矩形」的整体区域，完全贴合你“组合区域”的需求，比多层背景模拟更直观。
• 简化背景层：去掉了原来的红色占位渐变，让纹理背景和半透明蓝色层直接覆盖整个裁剪后的形状，自然实现你要的纹理效果。

备选方案（保留原背景逻辑） #

如果你只是想把红色半圆改成透明，保留多层背景的实现方式，只需要把第一个渐变的red替换成transparent即可：

.u-bg-blue-over-chevrons {
  background: 
    radial-gradient(circle 50px at bottom, #0000 97%, transparent), /* 替换red为transparent */
    radial-gradient(rgba(86, 117, 143, 0.1), rgba(86, 117, 143, 0.1)),
    white url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%23d6d6d6' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-position: center top, center, center top;
  background-repeat: no-repeat, repeat, repeat;
  background-size: auto 50px, cover, auto auto;
  height: 100vh;
  width: 100%;
}

不过这种方式下，半圆只是一个透明的“印记”，而非区域形状的一部分，更推荐用clip-path的方案哦~

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