Как обрезать дочерний блок родительским css?

Есть следующий код:

.back-side{
    display: block;
    position: relative;
}
.shape{
    position: absolute;
    width: 150px;
    height: 200px;
    background: grey;
    border-radius: 6%;
    overflow:hidden;
    transform: skew(42deg, 0deg) rotate(20deg) scale(460%);
    margin: 260px 0 0 150px;
}

Нужно сделать так что бы shape не выходила за границы (т.е как бы обрезалась родительским блоком) back-side, div.shape вложен в div.back-side. Подскажите пожалуйста как реализовать это?