skewed rectangle - with transform skew

by ian_smithz

HTML

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

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

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

</section>

CSS

/* skew it skew it */
 
.skewed-rectangle:before {
    z-index: 0;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -128px;
    display: block;
    width: 255px;
    background: #000;
    -webkit-transform: skew(-23deg);
    -ms-transform: skew(-23deg);
    transform: skew(-23deg);
}


/* 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}

/* position */
.position-relative {position: relative}
.position-absolute {position: absolute}

/* drop shadow */
.drop {box-shadow: 0 4px 6px -2px rgba(0,0,0,.2)}
.drop-2 {box-shadow: 0 8px 12px -2px rgba(0,0,0,.4)}