I'm trying to replicate the below pattern in CSS, but I'm having trouble styling the last bit, which is the irregular shape (an extra "block" jutting out of the top of each little black square)
I can't find a way to manipulate the small repeated boxes to do that, so that they match the picture:
This is my code so far:
html {
background-color: rgb(255, 255, 255);
}
.inner {
width: 100%;
height: 100%;
background-image: conic-gradient(transparent 0deg, transparent 150deg, black 90deg, black 270deg);
border-radius: 50%;
border: 1px solid black;
}
.outer {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #ffffff;
background-image: repeating-linear-gradient( 90deg, white 0px, transparent 0px, transparent 50%, white 50%, white),
repeating-linear-gradient( 90deg, white 1px, transparent 1px, transparent 50%, white 50%, white),
repeating-linear-gradient( 180deg, white 0px, transparent 0px, transparent 50%, white 50%, white),
repeating-linear-gradient( 180deg, white 1px, transparent 1px, transparent 50%, white 50%, white),
repeating-linear-gradient( 45deg, black 0px, transparent 0px, transparent 40%, black 40%, black),
repeating-linear-gradient( 225deg, black 0px, transparent 0px, transparent 50%, black 50%, black);
background-size: 20px 20px;
}<div class="outer">
<div class="inner"></div>
</div>The goal here is to improve my abilities with CSS, so non-CSS solutions are not useful here.