html로 이미지와 텍스트를 대각선으로 나누는 방법은 무엇입니까?

Question

이미지와 텍스트를 HTML로 나눌 때 문제가 있습니다. 이 같은

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

내 코드 :

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

텍스트와 이미지가 생성됩니다. 하지만이 방법을 그리는 방법을 모르겠습니다.

당신은 여기에서 실제 이미지를 볼 수 있습니다

Answer 1

당신은이 결과를 달성하기 위해 clip-path와 함께 재산 shape-outside를 사용할 수 있습니다.

• shape-outside browser support
• clip-path browser support

:

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>

---

지원하므로 이러한 속성을 지원하는 브라우저를 확인하기 위해 확인이 잘되지 않습니다

---

이 tool을 사용하면 polygon() CSS 기능에 대해 다른 값을 생성 할 수 있습니다.