divs上的45度角度切割
divs上的45度角度切割
提问于 2016-08-05 22:00:49
我试着在我的网站上剪掉我的大多数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小提琴：https://jsfiddle.net/xyvz5z8m/1/
回答 1
Stack Overflow用户
发布于 2016-08-05 22:14:35
你应该能够做一个精确的45度剪裁使用CSS calc，以计算出位置，而不是百分比。例如：
-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)来从元素的远侧获得准确的位置，尽管考虑到这可能会对浏览器的支持非常有限。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38791137
复制相关文章
相似问题
腾讯云开发者
