Можно ли так сделать углы?

#css

[]

Как сделать такие завернутый углы? или их просто с макетов картинкой взять?
По всему макету почти каждое изображение так оборачивают.
    

Ответы

Ответ 1

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



.line {
  margin-top: 50px;
  position: relative;
  height: 50px;
  background: red;
}

.line:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -10px;
  border-bottom: 20px solid RGB(249, 201, 16);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 20px;
  transform: rotate(-15deg);
}

.line:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid blue;
  transform: rotate(-15deg);
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 1));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 1));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#000')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#000')";
}