45度角度切分格

我想切出我網站上大多數div元素的右上角。這些div都是不同的大小。我試圖找到一個這樣做的響應方式。我在這裏遇到了這個網站：http://bennettfeely.com/clippy/，它允許你剪出一個自定義的多邊形形狀。45度角度切分格

這是我到目前爲止有：

div { 
 
\t width: 280px; 
 
\t height: 280px; 
 
\t background: #1e90ff; 
 
\t -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%); 
 
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%); 
 
} 
 

 
/* Center the demo */ 
 
html, body { height: 100%; } 
 
body { 
 
    background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg'); 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
}

<div></div>

我的問題是我想讀這些剪報，並找出如何使完美的45度角切斷右上角。截至目前，這個多邊形是由我自由創建的。我試圖看看我需要使用什麼百分比來從右上角切出完美的45度角。

隨着解決方案，我將添加到大多數我的divs，按鈕和圖像的截斷。

我發現在Stack Overflow上使用border-left和right來設置絕對位置的其他方法，但問題是我需要div截取是透明的，因爲其中一些背景圖像背後是透明的。

這裏是一個JS小提琴某個設定：https://jsfiddle.net/xyvz5z8m/1/

來源

2016-08-05 Vince Mamba

我相信它會創建點，所以0％100％是左下角，100％100％是右下角等等。不知道如何將其轉換爲45度角。我不確定這是否會是一個數學問題？ –

背景你的divs坐在純色上嗎？ – Shaggy

@Shaggy並不總是，其中一些將成爲背景圖片。這就是爲什麼這樣做有點困難。 –

您應該能夠通過使用CSS鈣，制定出位置從剪輯做的，而不是百分比的確切45度夾子。例如

-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #1e90ff; 
 
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
 
    clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
 
    
 
    /* Resizing this div just to show that this will remain at 45 degrees */ 
 
    animation: resize 5s infinite; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background: #ededed; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
@keyframes resize { 
 
    0%  { width: 100px; height: 100px; } 
 
    25% { width: 50px; height: 100px; } 
 
    50% { width: 50px; height: 50px; } 
 
    75% { width: 150px; height: 50px; } 
 
    100% { width: 100px; height: 100px; } 
 
}

<div></div>

的關鍵部分是，我們使用的像素大小爲剪切區域的定位，並calc(100% - 30px)得到從元件的另一邊的確切位置，雖然裸考慮到這可能具有非常有限的瀏覽器支持。

來源

2016-08-05 14:14:34 DBS

啊我看到，但與此解決方案，我需要一個修復高度和寬度是否正確？例如，如果我想對按鈕做這種事情，它看起來不會一樣。 –

@VinceMamba這要求截斷面積是相同的大小是，但可能你可以做一些基於寬度/高度的百分比計算。我會看看是否可以更新。 – DBS

如果可以的話，這將非常有幫助！謝謝。 –

45度角度切分格

回答

相關問題