Question

div{
    width: calc(5vw + 2.8868vh);
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    transform-origin: left;
    transform: skewX(30deg) translateX(-28vh) scaleX(10);
    float: left;
    shape-outside: polygon(0vh 0vh, calc(50vw - 38vh) 0vh, calc(50vw + 20vh) 100vh, 0vh 100vh);
}
p{
    word-spacing: 0.9em;
    line-height: 1.5;
    font-size: 150%;
    margin: 0;
    padding: 0;
    font-weight: 400;
    float: right;
    width: 70vw;
}

<div></div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna.
</p>

我尽了一切努力，尝试删除，添加或替换上面的任何属性，但无法正常工作。并不是变换的原因，根据Devtools的形状外部形状是正确的形状，位置无关紧要，文本的宽度或高度什么也不做，所以我现在需要您的帮助。有什么问题吗？

Answer 1

transform属性显示了您正在谈论的角度，也不需要将forEach浮动到右侧，否则文本将移到右侧并且没有文本会摩擦div，多边形的语法也是错误的。

我注释掉了不必要的代码行

div {
  width: calc(5vw + 2.8868vh);
  height: 100vh;
  /*     background: rgba(255, 255, 255, 0.8); */
  /*     transform-origin: left; */
  /*     transform: skewX(30deg) translateX(-28vh) scaleX(10); */
  float: left;
  shape-outside: polygon(0 0, 10% 0, 100% 100%, 0% 100%);
}

p {
  word-spacing: 0.9em;
  line-height: 1.5;
  font-size: 150%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  /*     float: right; */
  width: 70vw;
}

我将重新调整多边形的形状，以便您考虑使用此Tool

Shape-outside属性显示正确的形状，但不显示文本

1 个答案: