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

Question

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:

Ricky Ruiz · Accepted Answer · 2016-11-10T04:13:21.830

1

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.

edited Nov 10 '16 at 04:13

answered Nov 10 '16 at 04:08

Ricky Ruiz

25,455
6
44
53

Thanks, @Ricky_Ruiz, I did it. Current, I have other problem. Is text not fit with parent div is skew. Can you help me? My question at here: http://stackoverflow.com/questions/40519832/how-to-fix-content-with-div-skew – Ave Nov 10 '16 at 04:12
In your example, the text is not over into image. Each element in a tag separate. But my code seem not like this. – Ave Nov 10 '16 at 04:14
@vanloc Do you need to support Internet Explorer? – Ricky Ruiz Nov 10 '16 at 04:23
This optional. But I need two version IE and other browser. Thanks you because you edited my question to easy read. – Ave Nov 10 '16 at 04:26

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

1 Answers1