Question

对于标题div，我设置了一个剪切路径多边形，我希望我的内容（更具体地讲-图片）位于该形状的顶部，目前正在裁剪。

我试图将z-index赋予元素，另外，我尝试仅将sub 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？

1 个答案: