CSS：创建具有边界半径的时钟

Question

I decided to try and create an analog 12 hour clock with some basic CSS properties. 我决定尝试创建具有一些基本CSS属性的模拟12小时时钟。 I start off by creating a square div of 500px. 我首先创建一个500px的正方形div。 I then set the border-radius to 250px and get a nice looking circle. 然后，将border-radius设置为250px，并得到一个漂亮的圆圈。 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 12个刻度
360° in our circle 360度旋转
360 / 12 = 30° angles 360/12 = 30°角度

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. 我知道θ（0°，30°，60°等）和半径（250），并且通过使用cos和sin ，我可以找出相关的上，下，左和右值。 To get the left or right value (x), I can simply use: r * sin θ . 要获得左值或右值（x），我可以简单地使用： r * sin θ 。 To get the top or bottom value (y), I can use: r - (r * cos θ) . 要获得最高或最低值（y），我可以使用： r - (r * cos θ) 。 Hopefully the image below (excuse the MS Paint lack of skill) can help clear up what I'm trying to do. 希望下面的图片（对MS Paint缺乏技巧）可以帮助清除我正在尝试做的事情。

Once I have these equations, it becomes much easier to get the respective x and y values: 一旦有了这些方程式，就可以轻松获得相应的x和y值：

    θ (angle)   |  250 * sin θ [x]  | 250 - (250 * cos θ) [y]
--------------------------------------------------------------
   30° (1:00)   |   right: 125px    |      top: 33.5px
   60° (2:00)   |   right: 33.5px   |      top: 125px
   90° (3:00)   |   right: 0px      |      top: 250px
  120° (4:00)   |   right: 33.5px   |      bottom: 125px
  150° (5:00)   |   right: 125px    |      bottom: 33.5px
  180° (6:00)   |   right: 250px    |      bottom: 0px
  210° (7:00)   |   left: 125px     |      bottom: 33.5px
  240° (8:00)   |   left: 33.5px    |      bottom: 125px
  270° (9:00)   |   left: 0px       |      bottom: 250px
  300° (10:00)  |   left: 33.5px    |      top: 125px
  330° (11:00)  |   left: 125px     |      top: 33.5px
  360° (12:00)  |   left: 250px     |      top: 0px

Now that I've dragged the question on for far too long... my question is, why would my tick marks for 2, 3, 4, 8, 9, and 10 all be a bit off? 现在，我将问题拖了太长时间了……我的问题是，为什么我的2、3、4、8、9和10的刻度线会有点偏离？ Based on my calculations (I've always wanted to say that), I shouldn't be having these issues. 根据我的计算（我一直想这么说），我不应该遇到这些问题。 Sure, I did some rounding and left off some sig figs, but they are not that significant to make the positioning look wonky. 当然，我进行了一些四舍五入，并保留了一些无花果，但是它们对定位显得不那么重要。 Here is my code: 这是我的代码：

The HTML HTML

<body>
    <div id="clock">
        <div id="one" class="oneEleven tick"></div>
        <div id="two" class="twoTen tick"></div>
        <div id="three" class="threeNine tick"></div>
        <div id="four" class="fourEight tick"></div>
        <div id="five" class="fiveSeven tick"></div>
        <div id="six" class="sixTwelve tick"></div>
        <div id="seven" class="fiveSeven tick"></div>
        <div id="eight" class="fourEight tick"></div>
        <div id="nine" class="threeNine tick"></div>
        <div id="ten" class="twoTen tick"></div>
        <div id="eleven" class="oneEleven tick"></div>
        <div id="twelve" class="sixTwelve tick"></div>
    </div>
</body>

The CSS CSS

#clock {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  border: 1px solid black;
  position: relative;
}

.tick {
  background-color: black;
  height: 20px;
  width: 5px;
  position: absolute;
}

.oneEleven {
  /* ~6.7% */
  top: 33.5px;
}

.twoTen {
  /* 25% */
  top: 125px;
}

.threeNine {
  /* 50% */
  top: 250px;
}

.fourEight {
  /* 25% */
  bottom: 125px;
}

.fiveSeven {
  /* ~6.7% */
  bottom: 33.5px;
}

#one {
  right: 125px;
  transform: rotate(30deg);
}

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

#three {
  right: 0px;
  transform: rotate(90deg);
}

#four {
  right: 33.5px;
  transform: rotate(120deg);
}

#five {
  right: 125px;
  transform: rotate(150deg);
}

#six {
  left: 250px;
  bottom: 0px;
}

#seven {
  left: 125px;
  transform: rotate(-150deg);
}

#eight {
  left: 33.5px;
  transform: rotate(-120deg);
}

#nine {
  left: 0px;
  transform: rotate(-90deg);
}

#ten {
  left: 33.5px;
  transform: rotate(-60deg);
}

#eleven {
  left: 125px;
  transform: rotate(-30deg);
}

#twelve {
  left: 250px;
  top: 0px;
}

The jsFiddle . jsFiddle 。 It's not entirely obvious on first glance, but if you look at the tick marks I've referenced, you'll see they're not lined up on the circle. 乍一看，这并不完全明显，但是如果您看一下我所引用的刻度线，您会发现它们并没有排成一圈。 I'm eventually going to move to percentages, but I would like to know why they're off, and is this the best approach for creating a circle that you'd like to add styling too? 我最终将要使用百分比，但是我想知道为什么不使用百分比，这是创建想要添加样式的圆的最佳方法吗？ I realize there's the HTML5 canvas tag , but I feel like that would be too difficult to work with and would be doing more processing than I need to perform... 我意识到这里有HTML5 canvas标签，但是我觉得那太难处理了，并且会执行比我需要执行的处理更多的处理...

Any help would be appreciated! 任何帮助，将不胜感激！

Answer 1

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. 您应该能够通过为每个刻度线适当设置transform-origin来修复它。 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". 因此，如果您在顶部和右侧位置放置，请将transform-origin设置为“ top right”。 For example: 例如：

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

CSS：创建具有边界半径的时钟

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-04-29 15:34:40

CSS：创建具有边界半径的时钟

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-04-29 15:34:40

解决方案1
2 已采纳 2013-04-29 15:34:40