javascript - 以内圆和外圆为界的三 Angular 形

Question

我正在尝试使用 CSS3 在一个圆内创建大约 12 个三 Angular 形(每个三 Angular 形的弧度为 360/12 = 30 度)，使它们的底部边界适合外圆的弧度，并且它们的顶点适合/围绕内圈。我最初的想法是创建每个三 Angular 形，然后将其定位在两个圆圈内。但是在 CSS 中使用简单的三 Angular 形创建方法，我不知道如何创建一个三 Angular 形，其边界正好适合两个圆圈。这些三 Angular 形稍后需要在其中包含文本(和样式等)并使用 jQuery 或 JavaScript 移动(我还没有完全弄清楚这部分)。谁能给我任何想法？我该怎么做。另外，这是否是最好的方法，特别是如果我以后想使用 jQuery 将它们作为一个组拖动到两个圆圈中。我是 CSS/JavaScript/jQuery 的新手，非常感谢任何帮助。

以下是两个圆圈的简单代码片段。

.outerCircle {
  width:400px;
  height:400px;
  border:1px solid black;
  border-radius:50%;
    
}

.innerCircle {
  position:relative;
  left:170px;
  top:170px;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid black;
  
}

.triangleOne {
	
  
}
  

<div class="outerCircle">
  <div class="triangleOne" ></div>
  <div class="triangleTwo" ></div>
  <div class="triangleThree"> </div>
  <div class="triangleFour" ></div >
  <div class="triangleFive"> </div>
  <div class="triangleSix"> </div>
  <div class="triangleSeven"> </div>
  <div class="triangleEight"> </div>
  <div class="triangleNine" ></div>
  <div class="triangleTen"> </div>
  <div class="triangleEleven"> </div>
  <div class="triangleTwelve" ></div>
  
  <div class="innerCircle"></div>
  
</div>

Answer 1

我正在使用这个 old question of mine对于一个不相关的主题，但我开发的解决方案之一实际上非常适合您的需求。 This ，尤其是对基础的摆弄。

标记略有不同，但基本相同:

<svg viewBox="0 0 400 400" version="1.1">
    <path d="M 200,0 A 200 200,0,0,1,300,26.794919243112258 L 215,174.01923788646684 A 30 30,0,0,0,200,170"/>
    <path d="M 300,26.794919243112258 A 200 200,0,0,1,373.2050807568877,100 L 225.98076211353316,185 A 30 30,0,0,0,215,174.01923788646684"/>
    ...
</svg>

您可以使用 CSS 轻松设置扇区样式:

path {
    fill: red;
    stroke: black;
    stroke-width: 1px;
}

但是您可以使用 SVG 做更多的事情，比如渐变等等。您甚至可以使用文本。

Live demo