width: 100px;
background: white;
border-left: 100px solid blue;
border-right: 100px solid red;

background-image:
 linear-gradient(180deg, 
   red 0%,     red 25%, 
   blue 25%,   blue 50%, 
   yellow 50%, yellow 75%, 
   green 75%,  green 100%
 )

background-color: white;
background-image: 
 radial-gradient(
   circle at 110px 74px, 
   red 44px, 
   transparent 44px
 )

&:before {
 // BLACK STAR (U+2605)
 content: "★";
 color: yellow;
 position: absolute;
 top: 30px;
 left: 66px;
 font-size: 88px;
 line-height: 88px;
}

&:before  {
 content: "★";
 color: blue;
 top: 48px;
 left: 103px;
 text-shadow:
     36px  9px 0px blue, 
     36px -9px 0px blue, 
    -36px  9px 0px blue, 
    -36px -9px 0px blue;
}

background-image:
   radial-gradient(circle at 60% 50%, 
                   blue 2rem, transparent 2rem),
   radial-gradient(circle at 40% 50%, 
                   red 2rem, transparent 2rem);

background-color: green;
background-image: 
 radial-gradient(
   circle at 110px 41px, 
   green 45px, 
   transparent 45x
 ), 
 radial-gradient(
   circle at 110px 55px, 
   yellow 47px, 
   transparent 47px
 );

&:before {
 display: block;
 width: 110px;
 height: 147px;
 background-color: blue;
 clip-path: polygon(0 0, 
   100% 50%, 
   0 100%
 );
}

display: block;
width: 1px;
height: 1px;
box-shadow: 106px 2px 0px #864320,
            107px 2px 0px #8F4620,
            108px 2px 0px #8F4620,
            109px 2px 0px #8F4620,
            110px 2px 0px #8F4620,
            111px 2px 0px #8F4620,
            112px 2px 0px #8F4620,
            104px 3px 0px #8D4520,
            105px 3px 0px #8F4620,
            [...] x 20k