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

可能な解決策の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をもちろん、あなたの要求に合わせて微調整する必要があります。