元素：在与没有位置的父级相同高度之前：绝对

Question

我正在尝试使用 shape-outside 和 clip-path 在 div 中添加自定义文本布局。它确实按预期工作，除了一件事 - 父高度不固定所以 .my-div:before 应该自动适应父 .my-div .

有没有办法在 :before 元素上不使用 position:absolute？如果我使用 position:absolute 那么 .my-div 中的文本会忽略该形状。如果我将固定高度添加到元素之前，则 overflow:hidden 将被忽略并且固定高度可能不适合 div.

有什么建议吗？

.my-div  {
  width: 100%;
  height: 100%;
  text-align: justify;
  position: relative;
  overflow:hidden;
}

.my-div:before {
dispaly:block;
  content:"";
  float:right;
  width: 200px;
  height: 350px; <!-- want to get rid of that height, and somehow use 100% height of .my-div without using position:absolute; OR set height to large number but somehow hide everything what's higher than parent -->
  background: #eee;
  shape-outside: polygon(100% 0%, 83% 1%, 86% 9%, 91% 13%, 81% 20%, 87% 30%, 91% 37%, 82% 40%, 70% 48%, 85% 58%, 92% 64%, 81% 66%, 74% 71%, 87% 73%, 91% 82%, 84% 83%, 71% 89%, 89% 93%, 91% 99%, 100% 99%);
  clip-path: polygon(100% 0%, 83% 1%, 86% 9%, 91% 13%, 81% 20%, 87% 30%, 91% 37%, 82% 40%, 70% 48%, 85% 58%, 92% 64%, 81% 66%, 74% 71%, 87% 73%, 91% 82%, 84% 83%, 71% 89%, 89% 93%, 91% 99%, 100% 99%);
}

Answer 1

Flexbox 可以帮助您。

调整下面的大小以查看结果：

.wrapper {
  display: flex; /* this will allow you to use height:100% */
  /* to debug, can be removed*/
  resize: horizontal;
  overflow: hidden;
  border:1px solid;
  /**/
}
.my-div  {
  text-align: justify;
  font-size: 30px;
  margin: 0;
}

.my-div:before {
  content :"";
  float: right;
  width: 200px;
  height: 100%; /* here */
  background: #eee;
  --shape:polygon(100% 0%, 83% 1%, 86% 9%, 91% 13%, 81% 20%, 87% 30%, 91% 37%, 82% 40%, 70% 48%, 85% 58%, 92% 64%, 81% 66%, 74% 71%, 87% 73%, 91% 82%, 84% 83%, 71% 89%, 89% 93%, 91% 99%, 100% 99%);
  shape-outside: var(--shape);
  clip-path: var(--shape);
}

<div class="wrapper">
  <p class="my-div">
    Pie icing jelly-o chocolate donut tootsie roll jelly-o tart chupa chups. Jujubes fruitcake lemon drops muffin gummi bears sweet marshmallow tootsie roll jelly beans. Tart chupa chups chocolate sesame snaps sweet halvah. Sugar plum gummi bears cake cupcake jelly cake lemon drops marzipan. Marshmallow cotton candy wafer apple pie gummi bears gummi bears toffee gummies carrot cake.
  </p>
</div>

更多详情：https://css-tricks.com/float-an-element-to-the-bottom-corner/

元素：在与没有位置的父级相同高度之前：绝对

Element: before same height as parent without position: absolute

html

css

clip-path