6

Just as in Offset a background image from the right using CSS I want to position my shape some absolute value relative to the right edge of the container.

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

This should cut a triangle from the element on the right, which is 1em long.

I cannot use % because then the triangle size would depend on the length of the element, which I don't want.

Unfortunately it does not work this way. Is there another solution?

Community
  • 1
  • 1
Andy
  • 4,783
  • 2
  • 26
  • 51
  • 1
    I must warn you this clip-path method don't work on firefox; you can get the cross-browsers code building it [**here on this link**](http://cssplant.com/clip-path-generator) – L777 Apr 07 '16 at 16:15
  • 1
    If there's no solution with clip-path, you can translateX it by 100% or create a mirror one and set transform-origin on the right edge + scaleX(-1) or similar :) – FelipeAls Apr 07 '16 at 16:16
  • @FelipeAls this sounds interesting – but how do you actually do that? The shape contains text, so mirroring it wouldn't work I guess? – Andy Apr 10 '16 at 09:48
  • Ah yes, or you'd have to mirror a second time the elements containing text... – FelipeAls Apr 11 '16 at 09:28

1 Answers1

14

You could use the calc function to subtract 1em from 100% to achieve the required effect. Doing it this way would mean that the points would always be 1em from the right edge of the container and it wouldn't depend on the element's length.

There is no other way to do this with clip-path. Unlike background-image, these do not take a side as a reference. 

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>
Harry
  • 87,580
  • 25
  • 202
  • 214