如何實現傾斜的右邊緣div？

Question

我一直在尋找幾天的代碼，以使div的右邊緣傾斜45度。以下是對我特別企圖得到一個形象的例子...

似乎那裏有很多的「傾斜的邊緣」 div的例子，但我無法找到任何與特別是右傾斜。

我花了很多時間試圖改變其他人的代碼，但最終變得一團糟。

這是原來的CSS代碼我用得到我需要的結果試驗...

div { 
     position: relative; 
     display: inline-block; 
     padding: 1em 5em 1em 1em; 
     overflow: hidden; 
     color: #fff; 
    } 

    div:after { 
     content: ''; 
     position: absolute; 
     top: 0; left: 0; 
     width: 100%; height: 100%; 
     background: #000; 
     -webkit-transform-origin: 100% 0; 
     -ms-transform-origin: 100% 0; 
     transform-origin: 100% 0; 
     -webkit-transform: skew(-45deg); 
     -ms-transform: skew(-45deg); 
     transform: skew(-45deg); 
     z-index: -1; 
    } 

    body { 
     background: 
     url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg'); 
     background-size: cover; 
    } 

下面是HTML ....

<div>Slanted div text</div> 
    <div> 
     Slanted div text<br/> 
     on several lines<br/> 
     Another line 
    </div> 
    <div>Wider slanted div text with more text inside</div> 

Answer 1

創建DIV，然後疊加絕對定位的旋轉僞元素以創建傾斜的印象。

div { 
 
    height: 50px; 
 
    width: 300px; 
 
    background-color: black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
div:after { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: white; 
 
    position: absolute; 
 
    content: ""; 
 
    transform: rotate(45deg); 
 
    transform-origin: bottom right; 
 
}

<div></div>