Обтекание текста под углом

#html #jquery #css #вёрстка

Как сделать такое обтекание текста под углом?
    

Ответы

Ответ 1

https://css-tricks.com/almanac/properties/s/shape-outside/



.block{  
  overflow: hidden;  
  margin: 10px;
  padding: 15px;
}
.pict{
  float:left;
  width:100px;
  height:150px;
  margin:10px;
  background-color: #ccc;
  -webkit-shape-outside: polygon(100% 50%, 0 0, 0 100%);
  shape-outside: polygon(100% 50%, 0 0, 0 100%);  
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  -webkit-shape-margin: 10px;
  shape-margin: 10px; 
}

  

  text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text  text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text 





или



.block{  
  overflow: hidden;  
  margin: 10px;
  padding: 15px;
}
.pict{
  float:left;
  width:100px;
  height:150px;
  margin:10px;
  background-color: #ccc;
  -webkit-shape-outside: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
  shape-outside: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
   clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%);
  -webkit-shape-margin: 10px;
  shape-margin: 10px; 
}

  

  text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text  text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text text text text