html - 如何使用 css 创建倾斜的图像和文本？

Question

我想创建一个倾斜的图像并使用 在它旁边显示一个文本CSS 如下图所示:

Answer 1

可以用 clip-path 来完成和 shape-outside .

#container {
  direction: rtl;
}
.img {
  float: right;
  width: 150px;
  height: 150px;
  margin: 5px;
  background: blue;
  clip-path: polygon(75% 0, 100% 0, 100% 100%, 0% 100%);
  shape-outside: polygon(75% 0, 100% 0, 100% 100%, 0% 100%);
}

<dir id="container">
<div class="img"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id volutpat lectus, eget auctor arcu. In hac habitasse platea dictumst. Integer iaculis elit id nibh viverra, eget sagittis sem ultrices. Morbi ac leo in lectus placerat suscipit et vitae neque. Ut at metus ultricies, aliquam orci id, facilisis nulla. Ut non mattis mi. Integer sollicitudin, ex at ullamcorper aliquet, libero justo vestibulum lectus, ut eleifend urna est sed elit. Quisque imperdiet volutpat libero, at scelerisque turpis. Vivamus condimentum metus nulla, semper vestibulum dui molestie at. Vestibulum malesuada arcu interdum turpis scelerisque, mattis ultricies tortor feugiat. Sed sollicitudin in justo a fermentum. Cras aliquam nisi et nulla convallis, sit amet aliquet nisl consequat. Ut auctor arcu ac velit condimentum fermentum. Duis id erat sapien. Duis convallis, quam eget suscipit egestas, nisi arcu placerat magna, vitae euismod nulla erat nec magna.
</div>