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

357

16 ноября 2017, 03:42

[]

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

Answer 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')"; 
}