使用 shape-outside - CSS 将文本向左浮动

Question

我想让文本向左浮动，我想让文本位于三角形下方。我怎样才能做到这一点？.content {   background-color: #fff;   min-height: 320px;   min-width: 320px;   max-width: 600px;   text-align: justify;}.content::before {   float: left;   display: block;   content: '';   height: 0;   border: 150px solid #dcdcdc;   border-right-color: transparent;   border-bottom-color: transparent;}<div class="content">      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid      veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta      nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse.      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda,    </div>

Answer 1

您必须shape-outside特别使用属性polygon来解决问题：

参考

.content {

  background-color: #fff;

  min-height: 320px;

  min-width: 320px;

  max-width: 600px;

  text-align: justify;

}

.content::before {

  float: left;

  display: block;

  content: '';

  height: 0;

  border: 150px solid #dcdcdc;

  float: left;

  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);

  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);

  -webkit-shape-outside: polygon(100% 0%, 100% 0%, 0% 100%);

  shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);

}

<div class="content">

  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi

  atque cum eveniet, voluptas adipisci fugit esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda,

</div>

Answer 2

您可以通过多种方式做到这一点。我认为正确的方法之一是使用背景渐变。

.content {

  background-color: #fff;

  max-width: 600px;

  text-align: justify;

  background: linear-gradient(to bottom right, transparent 50%, white 50.25%), /* update direction and start/stop value to your needs */

  linear-gradient(90deg, #dcdcdc, #dcdcdc) white;

  background-size: 100% auto;

}

<div class="content">

  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi

  atque cum eveniet, voluptas adipisci fugit esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda,

</div>

注意：我删除了您的一些 CSS 属性（例如min_width或max-width），以便您可以看到此解决方案完全响应。当然，您可以将它们添加回来。