Кривая форма бумаги в css

Question

Мне нужна книга странице поворот экрана анимации эффект загрузки. Мне нужна бумага с фигурной формой, например, прикрепленная к книге изображение.

в моей статье, как прямоугольник, как сделать форму излечение бумаги

я установить это изображение в качестве фона браток я нужна бумага, как этот

.paperfixed { 
 
    position: absolute; 
 
    width: 43%; 
 
    background-color: #a92929; 
 
    height: 85%; 
 
    z-index: 0; 
 
    margin: 0px; 
 
    left: 4px; 
 
    top: 6px; 
 
} 
 
.cssload-thecube { 
 
    width: 92px; 
 
    height: 66px; 
 
    margin: auto auto; 
 
    position: relative; 
 
    background-color: #000; 
 
    border-radius: 8px; 
 
} 
 
.cssload-thecube .cssload-cube { 
 
    position: relative; 
 
} 
 
.cssload-thecube .cssload-cube { 
 
    float: left; 
 
    width: 51%; 
 
    height: 52%; 
 
    position: relative; 
 
    transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
} 
 
.cssload-thecube .cssload-cube:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -37px; 
 
    left: 12px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #e8cfcf; 
 
    animation: cssload-fold-thecube 1s infinite linear both; 
 
    -o-animation: cssload-fold-thecube 1s infinite linear both; 
 
    -ms-animation: cssload-fold-thecube 1s infinite linear both; 
 
    -webkit-animation: cssload-fold-thecube 1s infinite linear both; 
 
    -moz-animation: cssload-fold-thecube 1s infinite linear both; 
 
    transform-origin: 100% 100%; 
 
    -o-transform-origin: 100% 100%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -webkit-transform-origin: 100% 100%; 
 
    -moz-transform-origin: 100% 100%; 
 
} 
 
.cssload-thecube .cssload-c2 { 
 
    transform: scale(1.1) rotateZ(90deg); 
 
    -o-transform: scale(1.1) rotateZ(90deg); 
 
    -ms-transform: scale(1.1) rotateZ(90deg); 
 
    -webkit-transform: scale(1.1) rotateZ(90deg); 
 
    -moz-transform: scale(1.1) rotateZ(90deg); 
 
} 
 
@keyframes cssload-fold-thecube { 
 
    0%, 50% { 
 
    transform: perspective(-180deg) rotateX(-136px); 
 
    opacity: 0; 
 
    } 
 
    50%, 
 
    100% { 
 
    transform: perspective(136px) rotateX(-180deg); 
 
    opacity: 1; 
 
    } 
 
} 
 
.book-bg { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="book"> 
 
    <div class="cssload-thecube"> 
 
    <div class=""></div> 
 
    <div class="cssload-cube cssload-c2"></div> 
 
    </div> 
 
    <h5>Loading . . .</h5> 
 
</div>

Answer 1

I немного поглядели на это, и вы должны дать вам некоторое представление об одном способе создания cu страниц.

Для создания кривой нижней страницы требуется сплошной цвет фона. Надеюсь, вы сочтете это полезным.

.book { 
 
    width: 120px; 
 
    margin: 40px; 
 
    font-size: 0; 
 
} 
 
.page { 
 
    display: inline-block; 
 
    width: 60px; 
 
    height: 80px; 
 
    position: relative; 
 
} 
 
.page:before, .page:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 14px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 

 
} 
 
.firstPage:before { 
 
    background: #a92929; 
 
    top: -7px; 
 
} 
 
.secondPage:before { 
 
    background: red; 
 
    top: -7px; 
 
} 
 
.page:after { 
 
    background: #fff; 
 
    bottom: -7px; 
 
} 
 
.firstPage { 
 
    background: #a92929; 
 
} 
 
.secondPage { 
 
    background: red; 
 
}

<div class="book"> 
 
    <div class="page firstPage"></div> 
 
    <div class="page secondPage"></div> 
 
</div>