responsive sliding page test

by Richard Hunter

HTML

<div class='container'>
    <div class='alpha'>
        <div class='svg-container'>
            <svg width="100%" height="100%" viewBox="0 0 30 10">
                <polygon opacity="0.8" points="30,0 25,10 0,10 0,0" fill="red" />
            </svg>
        </div>
    </div>
    <div class='beta'>
        <div class='svg-container'>
            <svg width="100%" height="100%" viewBox="0 0 30 10">
                    
    		<image xlink:href="http://192.168.1.108:1314/images/home-page-consultant-image-dark.jpg"
					 x="0" y="0"
					 preserveAspectRatio="xMaxYMin"
					
					 height="100%"
					 width="100%" clip-path="url(#foo)"/>
                <clipPath id="foo">
                <polygon points="30,0 25,10 0,10 0,0" fill="lightblue" />
                    </clipPath>
            </svg>
        </div>
        <div class='svg-container-2'>
            <svg width="100%" height="100%" viewBox="0 0 30 10">
                		<image xlink:href="http://192.168.1.108:1314/images/home-page-customer-image-extended-dark.jpg"
					 x="0" y="0"
					clip-path="url(#bar)" preserveAspectRatio="xMinYMin"
					 transform="scale(1)"
					 height="100%"
					 width="100%"/>
                <clipPath id="bar">
                <polygon points="0,10 5,0 30,0 30,10" fill="orange" /><clipPath>
            </svg>
        </div>
    </div>
    <div class='gamma'>
        <div class='svg-container'>
            <svg width="100%" height="100%" viewBox="0 0 30 10">
                <polygon opacity="0.8" points="0,10 5,0 30,0 30,10" fill="red" />
            </svg>
        </div>
    </div>
</div>

SCSS

* {
    box-sizing : border-box;
}
.container {
    width : 60%;
    margin : auto;
    margin-top : 100px;
    overflow : hidden;
}
.alpha, .beta, .gamma {
    width : 33.33333%;
    float : left;
    height : 40vh;
    border : solid 1px red;
    position : relative;
}
.alpha {
}
.alpha .svg-container {
    height : 40vh;
    width : 120vh;
    position : absolute;
    z-index : 3;
    right : 0;
    svg {
    }
}
.beta .svg-container {
    position : absolute;
    background : green;

    height : 40vh;
    width : 120vh;
    right : 50%;
    margin-right : -10vh;
    
}
.beta .svg-container-2 {
 
    height : 40vh;
    width : 120vh;
    position : absolute;
    left : 50%;
    margin-left : -10vh;
    
}
.gamma .svg-container {
       height : 40vh;
    width : 120vh;
    position : absolute;
    z-index : 3;
    left : 0%; 
    
    
}