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 ></div>

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

CodePudding user response：

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

CodePudding user response：

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 >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div ></div>
  <div>