最佳答案
可以用 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>
关于html - 如何使用 css 创建倾斜的图像和文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67249957/