vanloc vanloc - 28 days ago 21
CSS Question

How to divide image and text with diagonal line in html?

I have a problem when dividing image and text in HTML.

#################################
# __________________________ #
# | | | #
# | | | #
# | text | IMAGE | #
# | | | #
# |_______|__________________| #
# #
#################################


My code like this:

<div class="container" style="height: 600px;">
<div class="row">
<div class="col-md-4">
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam repellat, rem possimus porro quisquam.</p>
</div>
<div class="col-md-6">
<img src="" alt="">
</div>
</div>
</div>


Will creates text and image.
But I don't know how to draw like this.

You can see real image at here:

enter image description here

Answer

You could use the property shape-outside along with clip-path to achieve this result.

body,
h2 {
  margin: 0;
}
.main {
  height: 100vh;
}
.img-container {
  width: 70%;
  height: 100%;
  background-color: lightgray;
  float: right;
  background: url(http://fillmurray.com/1000/1000) no-repeat center center / cover;
  -webkit-shape-outside: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
<div class="main">
  <div class="img-container"></div>
  <h2>Title</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque orci id elit mollis luctus. Integer tincidunt euismod lectus sodales convallis. Pellentesque bibendum libero turpis, ac hendrerit ante maximus et. Cras interdum tortor id metus
    hendrerit volutpat.
  </p>
</div>


Support is not that great so make sure to check the browsers that support these properties:


You can use this tool to generate different values for the polygon() CSS function.