CSS: Creating a clock with border-radius

Question

I decided to try and create an analog 12 hour clock with some basic CSS properties. I start off by creating a square div of 500px. I then set the border-radius to 250px and get a nice looking circle. After this, I add in the twelve tick marks, position them absolute-ly, and get their corresponding positions. The angle for each tick mark is based on this (apologies for spelling out the simple math): - 12 tick marks - 360° in our circle - 360 / 12 = 30° angles The position for each tick mark can be calculated using some basic trigonometry. I know θ (0°, 30°, 60°, etc.) and radius (250), and by using `cos` and `sin`, I can figure out the associated top, bottom, left, and right values. To get the left or right value (x), I can simply use: `r * sin θ`. To get the top or bottom value (y), I can use: `r - (r * cos θ)`. Hopefully the image below (excuse the MS Paint lack of skill) can help clear up what I'm trying to do. Once I have these equations, it becomes much easier to get the respectiv…

Accepted Answer

It looks like you've positioned each tick to get one corner in the right position on the circle. But then the tick gets rotated about the origin, which pushes part of it outside the circle. You should be able to fix it by setting transform-origin appropriately for each tick. You need to rotate about the same corner you've positioned. So if you positioned with top and right, set the transform-origin to "top right". For example:

```
#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
  transform-origin: top right;
}
```

CSS: Creating a clock with border-radius

Solution

Problem

Related problems