Верстка after элемента (треугольника)

*{ 
  box-sizing:border-box; 
} 
body{ 
  background-color:#cda; 
  margin:0; 
  padding:20px; 
} 
header{ 
  height:60px; 
  background-color:#ddd; 
  border-radius:6px; 
  position:relative; 
} 
header:before{ 
  content:''; 
  display:block; 
  position:absolute; 
  right:-10px; 
  top:-10px; 
  width:100px; 
  height:100px; 
  background:linear-gradient(225deg,red 50%,transparent 50%); 
  z-index:-1; 
}

<header></header>

*{ 
  box-sizing:border-box; 
} 
body{ 
  background-color:#cda; 
  margin:0; 
  padding:20px; 
} 
header{ 
  position:relative; 
} 
.header-inner{ 
  height:60px; 
  background-color:#ddd; 
  border-radius:6px; 
  position:relative; 
} 
header:before{ 
  content:''; 
  display:block; 
  position:absolute; 
  right:-10px; 
  top:-10px; 
  border-top:100px solid red; 
  border-left:100px solid transparent; 
}

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