用 SVG 剪出半个圆 header

Question

嘿，我正在尝试实现以下修复 header 形状。

它应该是响应式的并保持形状，我想使用背景 SVG，但我正在努力切掉内圆部分而不是将其变黑并响应地缩放它。

body {
  height: 1000px;
}


.circle {
    padding-top: 4rem;
    height: calc(100% - 4rem);
    /* margin-bottom: -4rem; */
    background-size:cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'%3E %3Ccircle fill='evenodd' cx='250' cy='250' r='250' /%3E %3C/svg%3E");

}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<header class="fixed w-screen h-32 bg-green-light">

    <p class="pl-4 pt-2 text-4xl h-16 text-white">
      blabla
    </p>
  <div class="circle">  </div>
</header>

<main class="w-screen pt-16">
  <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
</main>

Answer 1

您的 SVG 背景需要是一个切出圆孔的矩形。

如果您不想在矢量编辑器中绘制此形状，则需要使用 <mask> 在矩形中制作一个圆孔。

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'>
  <mask id="circular-hole">
    <rect width="100%" height="100%" fill="white"/><!-- part to keep -->
    <circle cx='250' cy='250' r='250' fill="black"/><!-- black for the hole -->
  </mask>
  <rect width="100%" height="100%" fill="#51d88a" mask="url(#circular-hole)"/>
</svg>

并且您的页面已更新为此 SVG：

body {
  height: 1000px;
}


.circle {
    padding-top: 4rem;
    height: calc(100% - 4rem);
    /* margin-bottom: -4rem; */
    background-size:cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'%3E %3Cmask id='circular-hole'%3E %3Crect width='100%25' height='100%25' fill='white'/%3E %3Ccircle cx='250' cy='250' r='250' fill='black'/%3E %3C/mask%3E %3Crect width='100%25' height='100%25' fill='#51d88a' mask='url(%23circular-hole)'/%3E %3C/svg%3E");

}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<header class="fixed w-screen">
  <p class="pl-4 pt-2 text-4xl h-16 text-white bg-green-light">
    blabla
  </p>
  <div class="circle">  </div>
</header>

<main class="w-screen pt-16">
  <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
</main>

用 SVG 剪出半个圆 header

Cutting out half a circle header with an SVG

html

css

svg

path

clip