如何将容器夹在距其右边缘的固定距离处？

Question

就像使用 CSS 从右侧偏移背景图像一样，我想shape相对于容器的右边缘定位我的一些绝对值。

clip-path: polygon(0 0, right 1em 0, 100% 50%, right 1em 100%, 0 100%, 0 0);

这应该从右边的元素切出一个三角形，它是 1em 长。

我不能使用 % ，因为这样三角形的大小将取决于元素的长度，这是我不想要的。

不幸的是，它不能以这种方式工作。还有其他解决方案吗？

Answer 1

您可以使用calc函数减去1em从100%以达到所需的效果。这样做意味着点将始终1em来自容器的右边缘，并且不依赖于元素的长度。

没有其他方法可以做到这一点clip-path。与 不同background-image，这些不以边作为参考。

div{
  height: 40vh;
  width: 100%;
  -webkit-clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 0 100%, 0 0);  
  background: red;
  }

<div></div>