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

#html #css #вёрстка

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

Ответы

Ответ 1

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


Ответ 2

Углы , маски, трансформация: Angled Edges with CSS Masks and Transforms.