Using Absolute as well as relative units in inline svg polygon

Question

I am using inline svg in clip-path to achieve a beveled corner effect on my container. Below is the code i am using right now

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .clip-svg {
      width: 0;
      height: 0;
    }
    .clip-polygon {
      -webkit-clip-path: url("#clip-svg-demo");
      clip-path: url("#clip-svg-demo");
    }
  </style>
</head>

<body>
  <div class="clip-wrap">
    <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" width="100px" height="100px" class="clip-polygon">
    <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" width="400px" height="400px" class="clip-polygon">
  </div>

  <svg display="none;">
    <defs>
      <clipPath id="clip-svg-demo" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 1,0 1,0.8 0.8,1 0,1" />
      </clipPath>
    </defs>
  </svg>

</body>

</html>

The issue i am facing is the svg shape that is used for clipping is responsive. As the size of my container increases the svg shape increases in size and hence the beveled cut at the bottom right corner also increases in length.

What i want is that the length of cut remain the same irrespective of the dimensions of my container on which clip-path property is applied.

In my code i specify the points of polygon relatively according to the coordinate system. I know that we can specify points absolutely in terms of pixels but that will make it a fixed size shape which may not fit perfectly into a container bigger or smaller than the svg shape dimensions.

What i needed to find out if it is possible to have both relative as well as absolute dimensions in polygon points at the same time such that the cut dimensions remain the same but the overall polygon size is responsive.

Current

Desired

EDIT I posted this question which has the exact same problem earlier but the answers there do not completely serve my requirement. I created this new thread as i wanted to get more help on one particular solution that i am trying right now (i.e clip path)

Not really, you'd need to adjust the polygon to the shape at runtime using javascript. — Robert Longson, Sep 08 '15 at 08:08
ok considering using js to modify polygon if i have multiple divs on a single page and each of them requires a different sized polygon then will changing the inline svg for each div while rendering work ? — Vinay, Sep 08 '15 at 09:00
So that means i need to create new polygons on the fly and insert them into my inline svg in html i guess.. — Vinay, Sep 08 '15 at 09:11
possible duplicate of [Cut corner on div with image set to 100% height and width](http://stackoverflow.com/questions/32370083/cut-corner-on-div-with-image-set-to-100-height-and-width) — CBroe, Sep 08 '15 at 09:58
@CBroe actually that question is posted by me as well. It already has lot of points that need to be discussed so i thought of taking the clip path discussion into a new thread. But yes they point to the same problem. — Vinay, Sep 08 '15 at 10:09
I know it’s your question, and you asked about a mask that doesn’t “scale” with the image there already. But you’re right, since you have decided on a specific technique to use now, it might be more prudent to ask about the problem in that specific context again. (I’ve retracted my close vote, I’ll just leave the above comment, since it might give other readers some more context.) — CBroe, Sep 08 '15 at 10:16
As for the problem itself, I don’t know of a way to mix absolute and relative units in such a way – and I doubt there is one. Perhaps creating the SVG used with JavaScript, resp. manipulating the path coordinates dynamically could be a solution … in combination with a resize handler that updates those if the window size changes, and therefor the image dimensions with it …? — CBroe, Sep 08 '15 at 10:17

score 0 · Answer 1 · answered Sep 08 '15 at 12:05

If the background of your page is a solid colour (ie. not an image or pattern), you could do it this non-SVG way:

.clip-wrap {
  position: relative;
  overflow: hidden;
}

.small,
.small .clip-polygon {
  width: 100px;
  height: 100px;
}

.large,
.large .clip-polygon {
  width: 400px;
  height: 400px;
}

.clip-wrap::after {
  content: "";
  display: block;
  position: absolute;
  background-color: white;
  width: 30px;
  height: 30px;
  bottom: -15px;
  right: -15px;
  transform: rotateZ(45deg);
}

<div class="clip-wrap small">
  <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" class="clip-polygon">
</div>

<div class="clip-wrap large">
  <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" class="clip-polygon">
</div>

Unfortunately i don't have a solid background. – Vinay Sep 08 '15 at 12:06 — Vinay, Sep 08 '15 at 12:06

Using Absolute as well as relative units in inline svg polygon

1 Answers1