Wie wird der Behälter um einen festen Abstand von seiner rechten Kante abgeschnitten?

Question

Genau wie in Offset a background image from the right using CSS möchte ich meine shape einige Absolutwert relativ zum rechten Rand des Behälters positionieren.

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

Dies sollte ein Dreieck aus dem Element auf der rechten Seite, die 1em lang ist, schneiden.

Ich kann nicht% verwenden, da dann die Dreiecksgröße auf der Länge des Elementes abhängen würde, was ich nicht will.

Leider ist es nicht auf diese Weise arbeiten. Gibt es eine andere Lösung?

Answer 1

Mit der Funktion calc können Sie 1em von 100% abziehen, um den gewünschten Effekt zu erzielen. Würde man dies tun, würde dies bedeuten, dass die Punkte immer 1em vom rechten Rand des Containers sind und es nicht von der Länge des Elements abhängen würde.

Es gibt keine andere Möglichkeit, dies mit clip-path zu tun. Im Gegensatz zu background-image, diese nehmen keine Seite als Referenz.

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>