如何将容器从右边缘固定一段距离？

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函数从1em中减去100%以获得所需的效果。这样做意味着点将始终从容器的右边缘1em，并且它不会取决于元素的长度。

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

＆＃13;

＆＃13;

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;
  }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;