Стилизация блоков Bootstrap

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
  margin:0; 
} 
 
.block-1 { 
  position: relative; 
  height: 150px; 
  background: #8b8b89; 
  padding-bottom: 60px; 
  text-align: center; 
} 
 
.block-1:before { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  border-top: 50px solid transparent; 
  border-left: 50vw solid red; 
  border-right: 50vw solid red; 
  border-bottom: 4px solid red; 
} 
 
.block-1:after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  border-top: 50px solid transparent; 
  border-left: 50vw solid #fff; 
  border-right: 50vw solid #fff; 
} 
 
.block-2 { 
  position: relative; 
  height: 150px; 
  background: #8b8b89; 
  padding-bottom: 60px; 
  padding-top: 60px; 
  text-align: center; 
} 
 
.block-2:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  border-top: 50px solid #fff; 
  border-left: 50vw solid transparent; 
  border-right: 50vw solid transparent; 
} 
 
.block-2:after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  border-top: 50px solid transparent; 
  border-left: 50vw solid #fff; 
  border-right: 50vw solid #fff; 
}

<div class="block-1">блок 1</div> 
<div class="block-2">карта</div>