.slider {
    overflow: hidden;
    height: 30%;
    display: inline-flex;
    width: unset;
    position: relative;
}
.slider > div {
    width: 200px;
    transform: rotate(30deg);
    overflow: hidden;
}
.slider > div > img {
    height: 100%;
    transform: rotate(-30deg);
}


.shade {
    display: flex;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
}
.shade > * {
    background-color: #eb6068;
    width: 100px !important;
    height: 150%;
    top: -25%;
}
.shade3 {
    opacity: .33;
    
}
.shade2 {
    opacity: .66;   
    
}
.shade1 {
    
}