Здравствуйте! Подскажите, как обрезать фон, как показано на изображении? сделал 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 есть онлайн мейкер. Но тут зависит от поддержки браузеров, нужно это свойство вам или нет.
Комментариев нет:
Отправить комментарий