gear icon using a single div in pure css - html

Question

I'm trying to create this icon using pure css & a single div
so far I've only managed to add 2 points like this:
:root {
--gear_radius: 5rem;
--gear_color: black;
--gear_thickness: 1.5rem;
--gear_pin_length: 1.5rem;
--gear_pin_gap: 1.5rem;
}
.gear {
margin: 5rem;
height: var(--gear_radius);
width: var(--gear_radius);
border-radius: 50%;
border: var(--gear_color) var(--gear_thickness) solid;
box-sizing: border-box;
position: relative;
}
.gear:before {
position: absolute;
content: "";
display: block;
height: var(--gear_pin_length);
width: var(--gear_thickness);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 0 calc(var(--gear_thickness) * 2) 0 0 black, 0 calc(var(--gear_thickness) * -2) 0 0 black;
}
.gear:after {
position: absolute;
content: "";
display: block;
height: var(--gear_pin_length);
width: var(--gear_thickness);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
box-shadow: 0 calc(var(--gear_thickness) * 2) 0 0 black, 0 calc(var(--gear_thickness) * -2) 0 0 black;
}
<div class="gear"></div>
How do I add 2 more points at the top and bottom? I don't know what approach to take from here?

Answer 1

The original picture of a gear wheel has an angle to the sides of each tooth.
However, I notice that in your part-solution you aren't worried about that and have parallel edges.
Here's a snippet that puts in all 6 teeth with parallel edges.
It uses before and after pseudo elements which had stripes as background and are rotated. The main div also has a stripe for a background but additionally a radial gradient with white and black circles.
.cog {
width: 30vmin;
height: 30vmin;
position: relative;
background-image: radial-gradient(white 0 35%, black 35% 70%, transparent 70% 100%), linear-gradient(to right, black, black);
background-size: 70% 70%, 25% 100%;
}
.cog::before,
.cog::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, black, black);
background-size: 25% 100%;
z-index: -1;
}
.cog,
.cog::before,
.cog::after {
background-repeat: no-repeat;
background-position: center center;
transform-origin: center;
}
.cog::before {
transform: rotate(60deg);
}
.cog::after {
transform: rotate(120deg);
}
<div class="cog"></div>
Here's what it produces:
To get more sophisticated shape - such as the slope on the teeth, you could do more with gradients or just CSS clip-path (though by the time you've done this you probably might as well have created an SVG).

Answer 2

Well, of course SVG is better, but since your question is more of a challenge, here is my solution:
* {
margin: 0;
padding: 0;
}
.icon {
position: relative;
background: beige;
height: 160px;
width: 160px;
}
.wheel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 32px;
height: 32px;
background: beige;
border-radius: 50%;
border: solid 24px brown;
}
.cog {
position: absolute;
width: 24px;
height: 120px;
border-radius: 6px;
background: brown;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.cog:nth-child(2) {
transform: rotate(45deg);
}
.cog:nth-child(3) {
transform: rotate(90deg)
}
.cog:nth-child(4) {
transform: rotate(135deg)
}
<div class="icon">
<div class="cogs">
<div class="cog"></div>
<div class="cog"></div>
<div class="cog"></div>
<div class="cog"></div>
</div>
<div class="wheel"></div>
<div>