Question

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

这是我到目前为止所做的：

＆＃13;



signingConfigs {
    fullRelease {
        keyAlias 'fullRelease'
        keyPassword 'fullPass'
        storeFile file('C:\\Dev_Projects\\Android\\certificateFull.jks')
        storePassword 'fullPass'
    }
    demoRelease {
        keyAlias 'demoRelease'
        keyPassword 'demoPass'
        storeFile file('C:\\Dev_Projects\\Android\\certificateDemo.jks')
        storePassword 'demoPass'
    }
}

＆＃13;

signingConfigs {
    fullRelease {
        keyAlias 'fullRelease'
        keyPassword 'fullPass'
        storeFile file('C:\\Dev_Projects\\Android\\certificateFull.jks')
        storePassword 'fullPass'
    }
    demoRelease {
        keyAlias 'demoRelease'
        keyPassword 'demoPass'
        storeFile file('C:\\Dev_Projects\\Android\\certificateDemo.jks')
        storePassword 'demoPass'
    }
}

＆＃13;

我的问题是我试图阅读这些剪报，并找出如何从右上角切割出完美的45度角。截至目前，这个多边形是由我徒手创造的。而且我试图看看我需要用什么百分比来从右上角进行完美的45度角切割。

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

我发现其他方法在Stack Overflow上使用border-left和right绝对位置，但问题是我需要div cutoff是透明的，因为其中一些背后有背景图像。

这是一个JS小提琴设置：https://jsfiddle.net/xyvz5z8m/1/

Answer 1

你应该能够通过使用CSS calc来做一个精确的45度剪辑，来计算剪辑的位置，而不是百分比。 e.g。

-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)从元素的远端获取精确位置，但记住这可能是非常有限的浏览器支持

在div上切45度角

1 个答案: