Html 기울어 진 이미지?

Question

안녕하세요, 이미지에 기울어 진 오른쪽 테두리가 생기는 것은 가능합니다.

.fh { 
 
    border-right: 180px solid transparent; 
 
}

<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>

그래서 제가 기본적으로 원하는 것은이 http://prntscr.com/glcq2l 대신 이미지입니다.

Answer 1

하나의 가능한 솔루션은 회전하고 숨겨진 오버플로를 설정하는 div가 있어야합니다. 주위를 둘러 싸서 이미지를 놓을 때 편리하게 사용할 수 있습니다. fiddle to play around here (나는 무슨 일이 벌어지고 있는지 이해할 수 있도록 테두리 만 남겼습니다)

(신체의 배경 이미지

body { 
 
    background-image: url(https://i.stack.imgur.com/xxGZk.jpg); 
 
} 
 

 
* { box-sizing: border-box; } 
 

 
.wrap { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: solid 2px black; 
 
    overflow:hidden; 
 
} 
 
.fh { 
 
    position: relative; 
 
    top: -5px; 
 
    left: -250px; 
 
    width: 600px; 
 
    height: 700px; 
 
    transform: rotate(45deg); 
 
    overflow: hidden; 
 
    border-top:solid 1px red; 
 
    border-bottom:solid 1px red; 
 
    border-left:solid 1px orange; 
 
    border-right:solid 1px lime; 
 
} 
 
.fh img { 
 
    position: absolute; 
 
    margin: -30px 0px 0 30px; 
 
    top: 0px; 
 
    left: 0px; 
 
    border:solid 2px green; 
 
    width: 400px; 
 
    height: 200px; 
 
    transform: rotate(-45deg); 
 
}

<div class="wrap"> 
 
    <div class="fh"> 
 
    <img src="http://lorempixel.com/400/200/sports/1/" > 
 
    </div> 
 
</div>

는 답변 가능한 해결책의 많은도 여기에서 찾을 수 있습니다 같은 테두리 또는 아무것도를 잘라 모서리가 투명 보여 아니라 그냥 거기). Cut Corners using CSS의 물론 그들은 당신의 요구에 맞춰야합니다.