<div class="flag labrys" role="img" aria-label="Labrys Lesbian Pride Flag. A double-side white axe, inside a black inverted triangle over a purple background."></div>
.flag {
  width: 80vmin;
  aspect-ratio: 70 / 45;
}

.flag.labrys {
  position: relative;
  background: 
     conic-gradient(from 330deg at 50% 100%, black 60deg, #0000 0) 50% 50% / 83% 83% no-repeat,
    darkmagenta;
}

.flag.labrys::before {
  content: "";
  position: absolute;
  width: 35%;
  top: 1.66%;
  left: 50%;
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  transform: translateX(-50%);
  -webkit-mask:
    radial-gradient(130% 215% at 50% 0%, #0000 35%, #000 0) 50% 0 / 100% 51% no-repeat,
    radial-gradient(130% 230% at 50% 100%, #0000 35%, #000 0) 50% 100% / 100% 51% no-repeat;
  mask:
    radial-gradient(130% 215% at 50% 0%, #0000 35%, #000 0) 50% 0 / 100% 51% no-repeat,
    radial-gradient(130% 230% at 50% 100%, #0000 35%, #000 0) 50% 100% / 100% 51% no-repeat;
}

.flag.labrys::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 4%;
  height: 60%;
  background: white;
  border-radius: 100% / 5%;
  box-shadow: 0 0 0 1px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.