/* reference: https://en.wikipedia.org/wiki/Flag_of_Syria */

:root {
  --flag-height: 2;
  --flag-width: 3;
  --syria-red: #ce1126;
  --syria-white: #ffffff;
  --syria-black: #000000;
  --syria-green: #007a3d;
}

#syria {
  position: relative;
  height: 180px;
  aspect-ratio: var(--flag-width) / var(--flag-height);
  background: linear-gradient(
    180deg,
    var(--syria-red) 0%,
    var(--syria-red) 33.333%,
    var(--syria-white) 33.333%,
    var(--syria-white) 66.666%,
    var(--syria-black) 66.666%,
    var(--syria-black) 100%
  );
}

#syria::before,
#syria::after {
  content: "";
  position: absolute;
  width: 15%;
  height: 15%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><polygon fill="%23007a3d" points="15,0 19,11 30,11 21,17 24,28 15,22 6,28 9,17 0,11 11,11"/></svg>');
  transform: translateY(-50%);
}

#syria::before { left: 35%; }
#syria::after { right: 35%; }