Текст обрезается внутри функции многоугольника и не принимает никаких команд стиля

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);
}

пример кодекса