如何使内容过于剪辑路径形状 div？

Question

对于我的页眉 div，我设置了一个剪辑路径多边形，我希望我的内容，更具体地说是一张图像，位于该形状的顶部，目前，它正在被剪切.

我试着给元素赋予z-index，另外，我尝试只对那个形状使用子div

<div className="header">
            <HomeNav />

            <div className="header-content">

                <div className="header-text">
                    <h1>title</h1>
                    <p>text text text</p>
                    <button className="btn btn-start">click</button>
                </div>

                <div className="header-pic">
                    <img alt="some pic" src={test}></img>
                </div>

            </div>

         </div>


.header{
    background-image: linear-gradient(210deg, #3f2b96, #a8c0ff);    
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 80%);


    display: grid;
    grid-template-rows: 14vh 86vh;
}

我希望图片位于多边形的顶部，这样 50% 的图片就会在多边形的结束线之后。

Answer 1

你想要的是不可能的，因为 clip-path 将剪辑元素及其所有内容。

您可以尝试使用倾斜变换以不同方式构建形状，如下所示：

.header {
  height: 200px;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.header:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:left;
  transform:skewY(-5deg);
  background-image: linear-gradient(215deg, #3f2b96, #a8c0ff);;
}
img {
 display:block;
 margin: 10px 10px 0 auto;
}

body {
 margin:0;
}

<div class="header">
 <img src="https://picsum.photos/id/1000/200/200">
</div>

如何使内容过于剪辑路径形状 div？

how to make content overly a clip-path shape div?

css

polygon

reactjs