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

Question

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

Answer 1

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

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

How can I create skew image and text with css?

html

css

skew