body {
  background:#444;
}

[class*="flag"],img{
  display:block;
  width:300px;
  height:150px;
  border:1px solid #333;
  position:relative;
  margin:100px auto;
  box-sizing:border-box;
}

.flag-uk:before,
.flag-uk:after {
  display:block;
  height:50%;
  width:100%;
  content:'';
  position:absolute;
  
  background: 
	-webkit-linear-gradient(90deg, #CF142B 20%, transparent 20%, transparent),
	-webkit-linear-gradient(0deg, transparent 45%, #CF142B 45%, #CF142B 55%, transparent 55%, transparent),
	
	-webkit-linear-gradient(90deg, #fff 33%, transparent 33%, transparent),
	-webkit-linear-gradient(0deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%, transparent),
	
	-webkit-linear-gradient(65deg, transparent 30.5%, #CF142B 30.5%, #CF142B 34.5%, transparent 34.5%, transparent),
	-webkit-linear-gradient(-65deg, transparent 61.5%, #CF142B 61.5%, #CF142B 65.5%, transparent 65.5%, transparent),
	
	-webkit-linear-gradient(65deg, transparent 28.5%, #fff 28.5%, #fff 40.5%, transparent 40.5%, transparent),
	-webkit-linear-gradient(-65deg, transparent 59.5%, #fff 59.5%, #fff 71.5%, transparent 71.5%, transparent),
	
	#00247D; 
}
.flag-uk:after {
  transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  top:50%;
}