提问者:小点点

在边框内包含文本-半径blob


问题:当使用边框半径和溢出时,文本会在角落里消失。
问题:是否可以将文本包含在边框半径内?
我不知道每页文本的长度,因此解决方案需要适用于大多数情况。

null

<div style="box-shadow: 5px 5px 16px 10px rgba(130,124,110,.25);border-radius: 39% 28% 64% 20% / 28% 16% 57% 66%;max-width:500px;max-height:500px;overflow:hidden;">
  <ul>
    <li>Chuck Norris doesn’t read books. He stares them down until he gets the information he wants.</li>
    <li>Time waits for no man. Unless that man is Chuck Norris.</li>
    <li>If you spell Chuck Norris in Scrabble, you win. Forever.</li>
    <li>Chuck Norris breathes air … five times a day.</li>
    <li>In the Beginning there was nothing … then Chuck Norris roundhouse kicked nothing and told it to get a job.</li>
    <li>When God said, “Let there be light!” Chuck said, “Say Please.”</li>
    <li>Chuck Norris has a mug of nails instead of coffee in the morning.</li>
    <li>If Chuck Norris were to travel to an alternate dimension in which there was another Chuck Norris and they both fought, they would both win.</li>
    <li>The dinosaurs looked at Chuck Norris the wrong way once. You know what happened to them.</li>
    <li>Chuck Norris’ tears cure cancer. Too bad he has never cried.</li>
    <li>Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light</li>
  </ul>
</div>

null


共1个答案

匿名用户

下面是一个使用shape-outisde的近似1。 这有点棘手,但是您需要添加更多的容器才能有4个伪元素用作浮动元素,并且还要有一个flex容器才能对浮动元素使用height:100%

这些值是根据您的情况进行的近似值。 没有特别的计算,只是简单的试错

1:不是一个完美的解决方案,因为部分文本仍可能溢出

null

.box {
  max-width: 500px;
}

.box div {
  height: 100%;
}

.box>div {
  height: 130%;
  box-shadow: 5px 5px 16px 10px rgba(130, 124, 110, .25);
  border-radius: 39% 28% 64% 20% / 28% 16% 57% 66%;
}

.box::before {
  content: "";
  float: left;
  height: 33%;
  width: 40%;
  shape-outside: radial-gradient(farthest-side at bottom right, transparent 99%, #fff 100%);
}

.box>div::before {
  content: "";
  float: right;
  height: 16%;
  width: 28%;
  shape-outside: radial-gradient(farthest-side at bottom left, transparent 99%, #fff 100%);
}

.box>div>div>ul::before {
  content: "";
  float: right;
  height: 75%;
  width: 53%;
  shape-outside: radial-gradient(farthest-side at top left, transparent 99%, #fff 100%);
}

.box>div>div::before {
  content: "";
  float: left;
  clear: left;
  height: 78%;
  width: 20%;
  shape-outside: radial-gradient(farthest-side at top right, transparent 99%, #fff 100%);
}

.container {
  display: flex;
  max-height: 500px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  height: 100%;
}
<div class="container">
  <div class="box">
    <div>
      <div>
        <ul>
          <li>Chuck Norris doesn’t read books. He stares them down until he gets the information he wants.</li>
          <li>Time waits for no man. Unless that man is Chuck Norris.</li>
          <li>If you spell Chuck Norris in Scrabble, you win. Forever.</li>
          <li>Chuck Norris breathes air … five times a day.</li>
          <li>In the Beginning there was nothing … then Chuck Norris roundhouse kicked nothing and told it to get a job.</li>
          <li>When God said, “Let there be light!” Chuck said, “Say Please.”</li>
          <li>Chuck Norris has a mug of nails instead of coffee in the morning.</li>
          <li>If Chuck Norris were to travel to an alternate dimension in which there was another Chuck Norris and they both fought, they would both win.</li>
          <li>The dinosaurs looked at Chuck Norris the wrong way once. You know what happened to them.</li>
          <li>Chuck Norris’ tears cure cancer. Too bad he has never cried.</li>
          <li>Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light</li>
        </ul>
      </div>
    </div>
  </div>