Страницы

Поиск по вопросам

вторник, 8 января 2019 г.

Как обрезать background на css


Здравствуйте! Подскажите, как обрезать фон, как показано на изображении? сделал background цветом. Низ обрезал с помощью clip-pathа верх никак не выходит. Кто знает - помогите, пожалуйста!


Ответ

1 вариант:
*{ margin:0; padding:0; } .content{ width:100%; height:350px; margin:50px auto; background-color:yellow; position: relative; transform: skewY(3deg); } .content:before{ content:''; display: block; background:yellow; width:100%; height:350px; position: absolute; transform: skewY(-6deg); top:60px; }


2 вариант:
* { margin: 0; padding: 0; } .content { width: 100%; height: 350px; margin: 50px auto; background-color: yellow; position: relative; -webkit-clip-path: polygon(0 0, 100% 13%, 100% 84%, 0% 100%); clip-path: polygon(0 0, 100% 13%, 100% 84%, 0% 100%); }

По clip-path есть онлайн мейкер. Но тут зависит от поддержки браузеров, нужно это свойство вам или нет.

Комментариев нет:

Отправить комментарий