右端から固定距離で容器をクリップする方法は？

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とは異なり、これらは参考として側を取っていません。

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>