gear icon using a single div in pure css

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;
}

How do I add 2 more points at the top and bottom? I don't know what approach to take from here?

user_10867454 · Answer

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);
}

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).

user_7330316 · Answer

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)
}

gear icon using a single div in pure css

2 Answers