html - Float text towards left using shape-outside - CSS

Question

I would like to float text to left, I would like to have text under my triangle. How can I do that?

.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>

标签： htmlcss

Answer 1

You have to use shape-outside property especially polygon to fix the issue:

reference

.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>