Html傾斜的圖像？

-1

你好是有可能使圖像有一個傾斜的右側邊框。Html傾斜的圖像？

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

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

所以我基本上要爲這個http://prntscr.com/glcq2l而是用圖片來代替。

來源

2017-09-15 Terry Chen

是的，這是可能的，請按照此[鏈接]（https://www.computerhope.com/issues/ch001784.htm） –

@RajeshMurugan歐普只想傾斜邊界，而不是整個圖像。 – Teemu

在這種情況下，我認爲重疊'div'更好。 –

一個可能的解決方案是有一個你旋轉並設置溢出隱藏的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當然，他們需要根據您的要求進行調整。

來源

2017-09-15 06:31:27 caramba

Html傾斜的圖像？

回答

相關問題