Question

嗨，所以我正在尝试一些CSS的新概念，其中我遇到了多边形函数，并想在网页中实现，所以我做到了，一切都很好，但是当我在其中添加文本时，我超出了期望的范围形状，颜色或字体没有变化。我想要一个看起来像通过使用margin-outside函数得到的结果，有人可以帮助我

HTML

<section id="side1">
    <div class="leftbox"></div>
    <div class="rightbox">
        <h2>Welcome</h2><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ultrices tellus.
            Fusce eu egestas nulla, sit amet sodales lorem. Sed volutpat laoreet libero varius rhoncus.
            Curabitur malesuada, purus vel varius ornare, erat leo consectetur mi, et consequat tortor
            sapien quis nulla. Vivamus faucibus tincidunt sapien, in rutrum arcu auctor sed. Interdum
            et malesuada fames ac ante ipsum primis in faucibus. Suspendisse consectetur, eros at
            vehicula semper, libero odio lacinia velit, id rhoncus ligula sem id ipsum. Morbi in 
            cursus enim. Aenean nisl ligula, pulvinar vitae metus ac, euismod rutrum dui.
        </p>
    </div>
</section>

盒子的CSS

#side1 {
    height: 400px;
    width: 75%;
    float: left;
    background: url(architecture-building-club-587840.jpg);
    background-size: cover;
    background-position-y: -220px;
    background-repeat: no-repeat;
    box-shadow: 1px 5px 30px rgba(0,0,0,.5);
    z-index: 1;
}

.leftbox {
    height: 100%;
    width: 30%;
    margin: 0px;
    float: left;
    -webkit-clip-path: polygon(0% 0%, 40% 0%, 25% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 0% 100%);
    background: rgb(0, 0, 0, 0.4);
}
.rightbox {
    height: 100%;
    width: 70%;
    margin: 0px;
    float: right;
    background: yellow;
    -webkit-clip-path: polygon(19% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(19% 0%, 100% 0%, 100% 100%, 0% 100%);
    background: rgb(0, 0, 0, 0.4);
}

#side1{
  height: 400px;
  width: 75%;
  float: left;
  background: url(architecture-building-club-587840.jpg);
  background-size: cover;
  background-position-y: -220px;
  background-repeat: no-repeat;
  box-shadow: 1px 5px 30px rgba(0,0,0,.5);
  z-index: 1;
}

.leftbox{
  height: 100%;
  width: 30%;
  margin: 0px;
  float: left;
  -webkit-clip-path: polygon(0% 0%, 40% 0%, 25% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 0% 100%);
  background: rgb(0, 0, 0, 0.4);
}
.rightbox{
  height: 100%;
  width: 70%;
  margin: 0px;
  float: right;
  background: yellow;
  -webkit-clip-path: polygon(19% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(19% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: rgb(0, 0, 0, 0.4);
}

<section id="side1">
  <div class="leftbox"></div>
  <div class="rightbox">
    <h2>Welcome</h2><br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ultrices tellus.
      Fusce eu egestas nulla, sit amet sodales lorem. Sed volutpat laoreet libero varius rhoncus.
      Curabitur malesuada, purus vel varius ornare, erat leo consectetur mi, et consequat tortor
      sapien quis nulla. Vivamus faucibus tincidunt sapien, in rutrum arcu auctor sed. Interdum
      et malesuada fames ac ante ipsum primis in faucibus. Suspendisse consectetur, eros at
      vehicula semper, libero odio lacinia velit, id rhoncus ligula sem id ipsum. Morbi in 
      cursus enim. Aenean nisl ligula, pulvinar vitae metus ac, euismod rutrum dui.
    </p>
  </div>
</section>

Answer 1

剪切路径不给对象边界以将子对象保留在其中。它只是通过您传递给对象的参数对对象进行切片。当您设置足够大的值以影响内容时，会产生类似于边框半径的效果。这些参数之外的所有内容都会被分割并隐藏。您可以在外部使用CSS形状或倾斜来更改父对象，但是倾斜也会使子对象倾斜。希望这会有所帮助。

img {
    height: 550px;
    width: 400px;
    float: left;
    shape-outside: polygon(100% 0, 0% 0%, 0 100%, 100% 0);
}

codepen example

文字在多边形功能内被剪切，不接受任何样式命令

1 个答案: