Как лучше реализовать фон в блоке?

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
header { 
  position: relative; 
  min-height: 100px; 
  border-top: 4px solid #0759B1; 
} 
 
.header-bg { 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: calc(50% - 30px); 
  height: 100%; 
  background: rgba(8, 111, 219, 1); 
  border-bottom: 4px solid #0759B1; 
} 
 
.header-bg:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: -30px; 
  height: 100%; 
  width: 50px; 
  border-radius: 0 0 0 7px; 
  background: rgba(8, 111, 219, 1); 
  transform: skew(20deg); 
  border-bottom: 4px solid #0759B1; 
  border-left: 4px solid #0759B1; 
} 
 
.header-bg:after { 
  content: ''; 
  position: absolute; 
  top: -4px; 
  left: -72px; 
  width: 25px; 
  height: 25px; 
  border: 4px solid transparent; 
  border-top: 4px solid #0759B1; 
  border-radius: 50%; 
  transform: rotate(35deg); 
}

<header> 
  <div class="header-bg"> 
     
  </div> 
</header>