如何创建边有链接的圆圈

Question

如何创建边有链接的圆圈

我在试着做一个像这样的圆圈这，这个..我成功了，但问题是，我需要每个橙色的一面是一个链接，我不能这样做的边界。如果有人能帮我这个忙，我会非常感激的。

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: green;}#incircle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px dotted orange;}

<div id="circle">
  <div id="incircle"></div></div>

Answer 1

你可以用svg氏arcs创建节和svg链接的锚(等效于HTML锚标记)标记。.frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFA500; &nbsp;&nbsp;stroke:&nbsp;#FFFFFF; &nbsp;&nbsp;transition:&nbsp;fill&nbsp;0.3s&nbsp;;}.center&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#008000;}a:hover&nbsp;.frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFC722;}text&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;17px; &nbsp;&nbsp;fill:&nbsp;#FFFFFF;}<svg&nbsp;width="200"&nbsp;height="200"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v-100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="42.5"&nbsp;text-anchor="middle">1</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,100"&nbsp;/><text&nbsp;x="170"&nbsp;y="105"&nbsp;text-anchor="middle">2</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="170"&nbsp;text-anchor="middle">3</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="170"&nbsp;text-anchor="middle">4</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/><text&nbsp;x="27.5"&nbsp;y="105"&nbsp;text-anchor="middle">5</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.0025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="42.5"&nbsp;text-anchor="middle">6</text></a> &nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="center"&nbsp;d="M100,100&nbsp;v-50&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,100&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/></a></svg>您还可以扩展或调整svg..frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFA500; &nbsp;&nbsp;stroke:&nbsp;#FFFFFF; &nbsp;&nbsp;transition:&nbsp;fill&nbsp;0.3s&nbsp;;}.center&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#008000;}a:hover&nbsp;.frag&nbsp;{ &nbsp;&nbsp;fill:&nbsp;#FFC722;}text&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;17px; &nbsp;&nbsp;fill:&nbsp;#FFFFFF;}<svg&nbsp;width="100"&nbsp;height="200"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<g&nbsp;id="circle"> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v-100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="42.5"&nbsp;text-anchor="middle">1</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,100"&nbsp;/><text&nbsp;x="170"&nbsp;y="105"&nbsp;text-anchor="middle">2</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,50"&nbsp;/><text&nbsp;x="135"&nbsp;y="170"&nbsp;text-anchor="middle">3</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;v100&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;-86.6025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="170"&nbsp;text-anchor="middle">4</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/><text&nbsp;x="27.5"&nbsp;y="105"&nbsp;text-anchor="middle">5</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="frag"&nbsp;d="M100,100&nbsp;l-86.6025,-50&nbsp;a100,100&nbsp;1&nbsp;0,1&nbsp;86.0025,-50"&nbsp;/><text&nbsp;x="65"&nbsp;y="42.5"&nbsp;text-anchor="middle">6</text></a> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;xlink:href="#"><path&nbsp;class="center"&nbsp;d="M100,100&nbsp;v-50&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,100&nbsp;a50,50&nbsp;1&nbsp;0,1&nbsp;0,-100"&nbsp;/></a> &nbsp;&nbsp;</g></svg><svg&nbsp;width="200"&nbsp;height="100"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg><svg&nbsp;width="150"&nbsp;height="150"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg><svg&nbsp;width="100"&nbsp;height="100"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg><svg&nbsp;width="50"&nbsp;height="50"&nbsp;viewBox="-2&nbsp;-2&nbsp;202&nbsp;203"&nbsp;shape-rendering="geometricPrecision"&nbsp;preserveAspectRatio="none"> &nbsp;&nbsp;<use&nbsp;xlink:href="#circle"&nbsp;/></svg>

Answer 2

纯CSS方法注意：使用伪元素可以显著减少标记，而我目前还没有使用伪元素。你可以用SVG但是这个可以单独使用CSS和HTML制作。我所做的就是创造12半圆(通过添加overflow: hidden;到父容器)。然后我创建了一个独立的组6半圆形。中心的角度应该是30deg每个(360/12)。为了达到这个目的，我们必须从它们原来的圆的中心旋转半圆。我们可以用transform-origin: 50% 100%;现在只需旋转/翻转第二组6半圆形来完成设计。最后，添加一个中央绿色圆圈来完成设计。.cont,&nbsp;#bag&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:200px; &nbsp;&nbsp;&nbsp;&nbsp;width:400px; &nbsp;&nbsp;&nbsp;&nbsp;overflow:hidden;}#one,&nbsp;#two,&nbsp;#three,&nbsp;#four,&nbsp;#five,&nbsp;#six&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:400px; &nbsp;&nbsp;&nbsp;&nbsp;width:400px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:200px;}#bag&nbsp;>&nbsp;div&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;transform-origin:50%&nbsp;100%;}#one,&nbsp;#three,&nbsp;#five&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:orange;}#one:hover,&nbsp;#three:hover,&nbsp;#five:hover&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:gold;}#two,&nbsp;#four,&nbsp;#six&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:forestgreen;}#bag&nbsp;>&nbsp;:nth-child(2)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;top:-200px; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(30deg); &nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(30deg);}#bag&nbsp;>&nbsp;:nth-child(3)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;top:-400px; &nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(60deg); &nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(60deg);}#bag&nbsp;>&nbsp;div:nth-child(4)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;top:-600px; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(90deg); &nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(90deg);}#bag&nbsp;>&nbsp;:nth-child(5)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;top:-800px; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(120deg); &nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(120deg);}#bag&nbsp;>&nbsp;:nth-child(6)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;top:-1000px; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(150deg); &nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(150deg);}#bag:nth-of-type(2){ &nbsp;&nbsp;&nbsp;&nbsp;transform:scale(-1); &nbsp;&nbsp;&nbsp;&nbsp;transform-origin:50%&nbsp;50%;}#green-center&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:200px; &nbsp;&nbsp;&nbsp;&nbsp;width:200px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:50%; &nbsp;&nbsp;&nbsp;&nbsp;background-color:forestgreen; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;top:-300px; &nbsp;&nbsp;&nbsp;&nbsp;left:100px;}<div&nbsp;id="bag"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="http://example.com/"><div&nbsp;id="one"></div></a> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="two">ABC</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="http://example.com/"><div&nbsp;id="three"></div></a> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="four"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="http://example.com/"><div&nbsp;id="five"></div></a> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="six"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div><div&nbsp;id="bag"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="http://example.com/"><div&nbsp;id="one"></div></a> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="two"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="http://example.com/"><div&nbsp;id="three"></div></a> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="four"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="http://example.com/"><div&nbsp;id="five"></div></a> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cont"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="six"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div><div&nbsp;id="green-center">