skewed rectangle - angle changes on resize

by ian_smithz

HTML

<section class="d-flex mh-600 w-100p bg-yellow">

    <div class="flex-grow h-600 skewed-rectangle bg-black h100p">
xxx
    </div>

    <div class="flex-grow  h-100p">
xxx
    </div>

</section>

CSS

/* skew it skew it */
.skewed-rectangle {    
    -webkit-transform: perspective(300px) rotateX(-30deg);
    -o-transform: perspective(300px) rotateX(-30deg);
    -moz-transform: perspective(300px) rotateX(-30deg);
    -ms-transform: perspective(300px) rotateX(-30deg);
    transform: perspective(300px) rotateX(-30deg);
    -webkit-transform-origin: 0% 200px;
    -moz-transform-origin: 0% 200px;
    -o-transform-origin: 0% 200px;
    -ms-transform-origin: 0% 200px;
    transform-origin: 0% 200px;
}

/* background colours */
.bg-black {background-color:#000}
.bg-yellow {background-color:#fef200}

/* flex */
.d-flex {display: flex}

.flex-grow {flex: 1}

.flex-v-centre {display: flex; align-items: center}
.flex-h-centre {display: flex; justify-content: center}
.flex-vh-centre {display: flex; align-items: center; justify-content: center}

/* widths */
.w-100p {width: 100%} 
.w-50p {width: 50%} 

.w-100 {width: 100px}

/* heights */
.h-100p {height: 100%} 
.h-600 {height: 600px}

.mh-600 {min-height: 600px}