как показать фоновые изображения на скошенных прямоугольниках с тенями - PullRequest
Новая
       67

как показать фоновые изображения на скошенных прямоугольниках с тенями

0 голосов
/ 03 декабря 2018

Я пытаюсь сделать этот эффект с использованием перекосов. Это мой HTML. 

<div class="row">
    <div class="one">One</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div>

и CSS 

.one, .three, .two {
    width: 50%;
    height: 0;
    -moz-transform: skew(-30deg,0deg);
    -webkit-transform: skew(-30deg,0deg);
    -o-transform: skew(-30deg,0deg);
    -ms-transform: skew(-30deg,0deg);
    transform: skew(-30deg,0deg);
    padding-bottom: 30rem;
    position: absolute;
    top: 0;
    box-shadow: inset 18px 18px 48px 16px rgba(0,0,0,0.5);
}


.one {
    background: #ff0;
    z-index: 75;
    left: -15%;
}
.two {
    background: blue;
    left: 30%;
    z-index: 77;
}
.three {
    background: red;
    z-index: 79;
    left: 70%;
}

.one:before, .three:before, .two:before{
    content: "";
    transform: skewX(30deg); 
    -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari and Chrome */
    background-repeat: no-repeat; 
    background-position: top left; 

    /* new styles */
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1000%; /* something ridiculously big */
    height: 1000%; /* something ridiculously big */
}
.one:before {

    background-image: url('https://www.readinbrief.com/wp-content/uploads/2017/12/gadgets-2018.jpg'); 
    z-index: 76;
}
.two:before{
    background-image: url('https://i.pinimg.com/originals/6c/0d/de/6c0dde4564bd293d93e2282e727002b1.jpg');
    z-index: 78;
}.three:before{
    background-image: url('https://www.wired.com/wp-content/uploads/2015/03/zte-spro2_0201-1024x768.jpg');
    z-index: 80;
}

Прямо сейчас яЯ не могу понять это правильно.Первое изображение выглядит хорошо, я хочу, чтобы все изображения полностью занимали соответствующие поля.Чего мне не хватает?Как правильно сделать что-то подобное?

...