Question

我正在尝试使用CSS3在圆内创建大约12个三角形（每个圆弧具有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>

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

Answer 2

您可以使用它来制作多个三角形中的圆圈：

.triangle { 
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 150px solid transparent; 
    border-right: 150px solid transparent; 
    border-top: 200px solid red; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; }
.One {
    top: 0px;
    left: 50px;
    transform: rotate(0deg);
}

仅通过旋转和位置调整每个三角形。经过一些调整，你应该得到你想要的。见

上的例子

JSfiddle:
http://jsfiddle.net/marcusrommel/20df94wo/1/

三角形由内圈和外圈组成

2 个答案: