Несколько примеров работы с CSS: вертикальные изгибы

Продолжаем гнуть прямоугольный блок.

Сегодня создадим блок, который как бы изогнут вертикально.

Создайте элемент:

<div class="curved-vt-2">
        <p>Содержимое</p>
</div>

Класс curved-vt-2 нужно описать в файле style.css:

.curved-vt-2 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.curved-vt-2:before,
.curved-vt-2:after {
    content:"";
    position:absolute;
    z-index:-2;
}
 
.curved-vt-2:before {
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:10px / 100px;
         border-radius:10px / 100px;
}
 
.curved-vt-2 p {
    font-size:16px;
    font-weight:bold;
}        

Может быть нужно согнуть одну сторону?

Создайте блок:

<div class="curved-vt-1">
        <p>Содержимое</p>
</div>

И добавьте в файл style.css такой код:

.curved-vt-1 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.curved-vt-1:before,
.curved-vt-1:after {
    content:"";
    position:absolute;
    z-index:-2;
}
 
.curved-vt-1:before {
    top:10px;
    bottom:10px;
    left:0;
    right:50%;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:10px / 100px;
         border-radius:10px / 100px;
}
 
.curved-vt-1 p {
    font-size:16px;
    font-weight:bold;
}