我正在尝试使用CSS3在一个圆内创建大约十二个三角形（每个圆具有360/12 = 30度的弧），以使它们的底边界适合外圆的弧，并且其峰值适合/围绕内圆弯曲。我最初的想法是创建每个三角形，然后将其放置在两个圆内。但是，使用CSS中的简单三角创建方法，我无法弄清楚如何创建一个边界恰好适合两个圆的三角形。这些三角形稍后需要在其中包含文本（并设置样式等），并使用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>最佳答案
我将此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