Как с помощью CSS сделать наклонные края у блока

27.04.2022

Нужно сделать блок со скошенными / наклонными краями, при этом текст или другие блоки в нем должны отображаться ровно.

Для такой задачи подойдет CSS свойство transform: skew

Самый простой способ сделать два вложенный, к примеру, div и первый повернуть на нужное количеств градусов, а второй на такое же количество, но в обратную сторону (со знаком минус).

Демо:

transform: skew(0, 5deg);
transform: skew(15deg, 15deg);
Наклонный блок
Блок фона

Основной CSS:

 

.test1 {
    transform: skew(0, 5deg);
}
.test1 .text {
    transform: skew(0, -5deg);
}

.test2 {
    transform: skew(15deg, 15deg);
}
.test2 .text {
    transform: skew(-15deg, -15deg);
}

.test31 {
    background-color: #FFFBCB;
    height: 100px;
    transform: skew(0, -5deg);
}

.test31 .text {
    transform: skew(0, 5deg);
}

.test32 {
    min-height: 300px;
    background-color: #ED5485;
    margin-top: -70px;
}

HTML каркас:

 
<div class="demo">
    <div class="demo-grid test test1">
        <div class="text">
            transform: skew(0, 5deg);
        </div>
    </div>
    
    <div class="demo-grid test test2">
        <div class="text">
            transform: skew(15deg, 15deg);
        </div>
    </div>
    
    <div class="test3">
        <div class="demo-grid test31">
            <div class="text">
                transform: skew(0, -5deg);
            </div>
        </div>
        <div class="demo-grid test32">
            transform: skew(0, 5deg);
        </div>
    </div>
</div>

Полный CSS:

 
.test {
    width: 300px;
    height: 100px;
    background-color: #57D1C9;
}

.demo-grid {
    display: grid;
    justify-content: center;
    align-content: center;
    margin-bottom: 50px;
}


.test1 {
    transform: skew(0, 5deg);
}
.test1 .text {
    transform: skew(0, -5deg);
}

.test2 {
    transform: skew(15deg, 15deg);
}
.test2 .text {
    transform: skew(-15deg, -15deg);
}


.test3 {
    margin-top: 100px;
    max-width: 500px;
}

.test31 {
    background-color: #FFFBCB;
    height: 100px;
    transform: skew(0, -5deg);
}
.test31 .text {
    transform: skew(0, 5deg);
}
.test32 {
    min-height: 300px;
    background-color: #ED5485;
    margin-top: -70px;
}

Категории: Web, CSS
Пометки: css прямоугольный фон с наклоном
Яндекс.Метрика