我希望剪辑路径内容在剪辑路径区域之外可见

Question

clip-path

容器内的内容在`剪辑路径区域之外不可见。

我尝试将定位属性应用于容器。我将相对定位应用于包含剪辑路径的外部容器，将绝对定位应用于包含内容的容器，我还向内容 div 添加了更大的 z 索引，期望内容可见。

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

<div class="bg-[#EDF4F9]">
  <div class='hero-section z-30 h-100v bg-blue-500 text-white p-4 text-left flex flex-col justify-center items-start h-[550px] md:h-[580px] lg:h-screen' style="clip-path: polygon(0 0, 45% 0, 10% 100%, 0 100%);">
    <div class='grid grid-cols-2 gap-12 items-center px-2 text-start md:text-start md:pl-36 my-6 md:my-10 w-[100%]' style=" shape-outside: polygon(310px 0px, 130px 405px, 558px 405px);
      ">
      <div style="z-index: 2; overflow: visible;">
        <div class="flex items-center pb-4">
          <i class="fa-solid fa-chart-simple text-7xl p-6 text-white"></i>
          <h2 class="text-5xl font-extrabold">County Revenue <br>Collection</h2>
        </div>
        <h3 class="text-4xl space-y-4 bg-clip-text">We Are Number 1 In Counties <br>Revenue Collection Systems In Kenya.</h3>
      </div>
      <img class="img mdl-28 overflow-visible z-30 h-full w-full" src="../media/images/computer.png" alt="image" />
    </div>
  </div>
</div>

Answer 1

解决这个问题最简单的方法是使用

::before or ::after

伪元素。尝试：

.hero-section {
  position: relative;
  z-index: 1;
}

.hero-section::after {
  position:: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background-color: blue;
  clip-path: "your clip path";
}