在 div 上切割 45 度角

Question

我试图剪掉我网站上大部分 div 元素的右上角。这些 div 都是不同的大小。我正在尝试找到一种响应方式来做到这一点。我在这里遇到了这个网站：http : //bennettfeely.com/clippy/，它允许你剪出一个自定义的多边形形状。

这是我到目前为止所拥有的：

div {
	width: 280px;
	height: 280px;
	background: #1e90ff;
	-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');
	display: flex;
	justify-content: center;
	align-items: center;
}

<div></div>

我的问题是我正在尝试阅读这些剪报并找出如何使右上角的完美 45 度角切掉。截至目前，这个多边形是我徒手创建的。我想看看我需要使用多少百分比才能从右上角切出完美的 45 度角。

使用该解决方案，我将为我的大多数 div、按钮和图像添加截止值。

我发现在 Stack Overflow 上使用具有绝对位置的左边界和右边界的其他方法可以做到这一点，但问题是我需要 div 截止是透明的，因为其中一些有背景图像。

这是一个已设置的 JS Fiddle：https : //jsfiddle.net/xyvz5z8m/1/

Answer 1

您应该能够使用 CSS calc 进行精确的 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%);

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

关键部分是我们使用像素大小来定位剪切区域，并calc(100% - 30px)从元素的远端获得准确的位置，尽管这可能对浏览器的支持非常有限。