Clipping Mask to SVG - css

Question

I'm trying to create a menu that when you hover over one of the links, it shows a sliced image in the background. I was able to create something that works only in Chrome using CSS3 clipping masks.
The code to produce these shapes scale with the browser widths (+1 for percentages!) and work excellent except for two things: one being that the mask does not clip the shape I need (refer to the colorful image to see the shape) and it is not viable to use with Firefox and IE.
#music_hover {
z-index: 5;
width: 100%;
height: 100%;
background: red;
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 70% 100%);
clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 70% 100%);
float: right;
position: absolute;
background: url(../music.jpg) bottom right no-repeat;
display: none;
}
Now, to find something supported by more browsers, I have switched to SVG images. I've done this in [CodePen]. My issue with my current solution is that the slices do not "stay together" when the browser is not 1920x1080. The 3 slices in the first row stick to the top while the second row sticks to the bottom creating a white strip in the middle of the page. The slices also do not scale as they have precise points to draw the shape (as opposed to percentages of the clipping mask).
HTML:
<svg version="1.1" id="novel_Position" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 773.685 540.94">
<defs>
<pattern id="novel_BG" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://loiseau-noir.com/seb/novel.jpg" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<path d="M420,1.058H0v539.569l696.512,0.313c0.031-72.714,29.516-138.541,77.173-186.197L420,1.058z" fill="red"/>
</svg>
CSS:
#novel_Position {
z-index: 5;
width: 40.5%;
top: 0;
left: 0;
position: fixed;
}
Now if all that isn't clear, the page should function like this:

Answer 1

You can do it without clipping masks, just using transforms and overflow: hidden. and some html structure
html, body {height: 100%;}
.base {
height: 100%;
width: 100%;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.part {
position: absolute;
width: 50%;
height: 50%;
overflow: hidden;
}
.part:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
transform-origin: inherit;
}
.NW {
left: 0px;
top: 0px;
transform: skewX(30deg);
transform-origin: bottom right;
}
.NW:after {
transform: skewX(-30deg);
background-image: url("http://placekitten.com/g/200/300");
}
.N {
top: 0px;
right: 0px;
transform: rotate(-60deg) skewX(-30deg);
transform-origin: bottom left;
overflow: hidden;
}
.N:after {
transform: skewX(30deg) rotate(60deg) translateX(-50%) ;
background-image: url("http://placekitten.com/g/600/400");
}
.NE {
right: 0px;
top: 0px;
transform: skewX(-30deg);
transform-origin: bottom left;
}
.NE:after {
transform: skewX(30deg);
background-image: url("http://placekitten.com/g/200/300");
}
.SW {
left: 0px;
bottom: 0px;
transform: skewX(-30deg);
transform-origin: top right;
}
.SW:after {
transform: skewX(30deg);
background-image: url("http://placekitten.com/g/200/300");
}
.S {
bottom: 0px;
right: 0px;
transform: rotate(60deg) skewX(30deg);
transform-origin: top left;
}
.S:after {
transform: skewX(-30deg) rotate(-60deg) translateX(-50%) ;
background-image: url("http://placekitten.com/g/200/300");
}
.SE {
right: 0px;
bottom: 0px;
transform: skewX(30deg);
transform-origin: top left;
}
.SE:after {
transform: skewX(-30deg);
background-image: url("http://placekitten.com/g/200/300");
}
.center {
position: absolute;
width: 20%;
height: 0%;
left: 40%;
top: 50%;
z-index: 10;
}
.roundcenter {
width: 100%;
padding: 50% 0;
border-radius: 50%;
background-color: lightgreen;
margin-top: -50%;
}
<div class="base">
<div class="part NW"></div>
<div class="part N"></div>
<div class="part NE"></div>
<div class="part SW"></div>
<div class="part S"></div>
<div class="part SE"></div>
<div class="center">
<div class="roundcenter">
</div>
</div>
</div>