如何从容器的右边缘以固定距离夹住容器？

Question

就像在 Offset a background image from the right using CSS 中一样，我想定位我的 shape 一些相对于容器右边缘的绝对值。

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

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

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

不幸的是，这种方式行不通。还有其他解决方案吗？

Answer 1

您可以使用calc函数从100%中减去1em来达到需要的效果。这样做意味着点总是从容器的右边缘 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>

如何从容器的右边缘以固定距离夹住容器？

How to clip the container by a fixed distance from its right edge?

css

css-shapes

clip-path