<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.