css - 如何将容器从其右边缘夹出固定距离？

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>