爲div創建一個傾斜的邊

我試圖創建一個傾斜的div，並在我看過的任何地方我剛剛發現瞭如何使用某種類型的邊框來做到這一點，因爲div會放在圖像的頂部。爲div創建一個傾斜的邊

所以在目前的代碼如下使用引導：

<div class="thumbnail"> 
    <a href="#"> 
     <img class="img-responsive" src="banner.jpg"> 
     <h3 class="headline-badge">slanted div text</h3> 
    </a> 
</div>

這是相關的CSS：

.thumbnail img.img-responsive { 
    width: 100%; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
} 

.headline-badge { 
    color: #fff; 
    margin-top: 0; 
    padding: 2%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    background-color: #000; 
}

所以我要創造向右上方傾斜。我嘗試使用一個很少或沒有成功的邊框，並且每當我嘗試使邊框透明時，它都不會顯示邊框。

有沒有人有關於如何使用CSS創建這個任何想法？我相信它也應該是敏感的，這是一個重大問題，因爲偏斜不能只是一個固定的高度/寬度。

斜面應該在45度左右，並且只在div的右側。文本不應該受到斜線的影響。

的效果應該是與此類似：

http://jsfiddle.net/webtiki/yLu1sxmj/

感謝張貼這個小提琴，但我需要真正的文本添加到div，和您的解決方案使得它很難做到這一點的評論在回覆中建議。傾斜也需要向上傾斜，而不是向下傾斜，我努力做到這一點，而不影響左側的分區。以你的例子，我無法弄清楚如何在div上添加文本，儘管我很害怕。

來源

2015-04-02 germainelol

你有一個它應該是什麼樣子的例子嗎？ – 2015-04-02 10:15:58

什麼樣的傾斜？如何傾斜？你想要的斜度是多少？你的意思是像[這種傾斜]（http://jsfiddle.net/9j02jxc7/），或者可能是一種不同類型的傾斜？向左傾斜？向右傾斜？一個80度的傾斜會讓你嚇一跳！也許只是在左邊緣傾斜，或者可能是一個搖擺的傾斜，使它看起來像一個對衝？ – MLeFevre 2015-04-02 10:18:14

對不起，我應該更具體，只是一個標準的45度傾斜右上角。 @MLeFevre你是正確的，但我只想右手邊傾斜，沒有傾斜的文字。對不起，我不夠清楚。 – germainelol 2015-04-02 10:20:56

您可以使用傾斜的僞元素來製作元素的傾斜固體背景。這樣，文本將不會受到transform屬性的影響。

變換原點屬性允許從右下角傾斜僞元素，並使用overflow:hidden;隱藏溢出翼部分。

僞元素堆疊的div後面的內容以負z-index：

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

<div>slanted div text</div> 
 
<div> 
 
    slanted div text<br/> on several lines<br/> an other line 
 
</div> 
 
<div>wider slanted div text with more text inside</div>

來源

2015-04-02 10:36:08

當我添加'位置：絕對'我失去了黑色背景，你知道爲什麼嗎？正如你從我的代碼中可以看到的那樣，這個定位用於將圖像左上方的文本放置在它的頂部，因爲HTML代碼實際上是一個'img'和'div'（我將'h3'改爲一個'div'） – germainelol 2015-04-02 13:10:12

@germainelol請分享重現您的問題的代碼，以便我可以看到如何解決它。 – 2015-04-02 13:24:24

http://jsfiddle.net/31myb1vp/1/這裏是一個jsfiddle，對不起，我包括了所有的bootstrap，它需要很長時間才能挑選出我想要的部分，但是頂部是相關的CSS到HTML – germainelol 2015-04-02 14:15:50

我想你想添加一個傾斜的橫幅或一個簡單的點擊區域。我會給出的建議來自亞馬遜和谷歌這樣的主要網站是如何做到的。它如下所示：

創建一個矢量圖像，該圖像具有所需的傾斜角度，並覆蓋所需div的比例。然後，當您將它作爲疊加層添加時，可以將其設置爲位置：絕對值，其中z-index大於div中的任何內容。

這將大大減少處理和緩存的圖像加載速度與CSS一樣快。這也將防止跨瀏覽器問題。

我希望這會有所幫助。

PS：矢量圖像的大小很好，所以你不必擔心像素化和任何類型的東西。

來源

2015-04-02 13:02:46 user3842346

**background-image: -webkit-linear-gradient(130deg, rgba(113, 182, 46, .6) 78%, rgba(0, 0, 0, 0) 0%);**

來源

2017-06-15 16:15:43

沒有任何解釋，爲什麼你推薦這個特定的解決方案或它是如何工作的，對任何人來說都不清楚這個解決方案是否適合他們。請記住，您不僅僅是回答OP，而且您還在爲尋找解決方案時找到答案的所有人解答他們可能遇到的類似問題。 – VDWWD 2017-06-16 13:18:13

爲div創建一個傾斜的邊

回答

相關問題