How can I create skew image and text with css?

user_14619211 0
Viewed 135

I want to create a skewed image and show a text next to it using CSS like the image below :
skewed image

skew css html
1 Answers

It can be done with clip-path and 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>

user_33470250
Related