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度角度切分格

回答

相关问题