由内圈和外圈包围的三角形

Question

我正在尝试使用 CSS3 在一个圆内创建大约十二个三角形（每个三角形的弧度为 360/12 = 30 度），以使它们的底部边框适合外圆的弧度，并且它们的峰值适合/弯曲内圈。我最初的想法是创建每个三角形，然后将其放置在两个圆圈内。但是使用 CSS 中简单的三角形创建方法，我无法弄清楚如何创建一个具有完全适合两个圆的边框的三角形。这些三角形需要稍后在其中包含文本（以及样式等）并使用 jQuery 或 JavaScript 移动（我还没有完全弄清楚那部分）。谁能给我任何想法？我该怎么做。另外，这是否是最好的方法，特别是如果我以后想使用 jQuery 将它们作为一个组拖动到两个圆圈内。我是 CSS/JavaScript/jQuery 的新手，任何帮助将不胜感激。

下面是两个圆的简单sn-p代码

.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

你可以用它用多个三角形组成一个圆：

.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/

Answer 2

我将这个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