如何创建边有链接的圆圈

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 {
  fill: #FFA500;
  stroke: #FFFFFF;
  transition: fill 0.3s ;}.center {
  fill: #008000;}a:hover .frag {
  fill: #FFC722;}text {
  font-size: 17px;
  fill: #FFFFFF;}

<svg width="200" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a>
  <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a></svg>

您还可以扩展或调整svg.

.frag {
  fill: #FFA500;
  stroke: #FFFFFF;
  transition: fill 0.3s ;}.center {
  fill: #008000;}a:hover .frag {
  fill: #FFC722;}text {
  font-size: 17px;
  fill: #FFFFFF;}

<svg width="100" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <g id="circle">
    <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a>
    <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a>
    <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
  </g></svg><svg width="200" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" /></svg><svg width="150" height="150" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" /></svg><svg width="100" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" /></svg><svg width="50" height="50" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none">
  <use xlink:href="#circle" /></svg>

Answer 2

纯CSS方法

注意：使用伪元素可以显著减少标记，而我目前还没有使用伪元素。

你可以用SVG但是这个可以单独使用CSS和HTML制作。

我所做的就是创造12半圆(通过添加overflow: hidden;到父容器)。然后我创建了一个独立的组6半圆形。

中心的角度应该是30deg每个(360/12)。为了达到这个目的，我们必须从它们原来的圆的中心旋转半圆。我们可以用transform-origin: 50% 100%;

现在只需旋转/翻转第二组6半圆形来完成设计。

最后，添加一个中央绿色圆圈来完成设计。

.cont, #bag {
    height:200px;
    width:400px;
    overflow:hidden;}#one, #two, #three, #four, #five, #six {
    height:400px;
    width:400px;
    border-radius:200px;}#bag > div {
    position:relative;
    transform-origin:50% 100%;}#one, #three, #five {
    background-color:orange;}#one:hover, #three:hover, #five:hover {
    background-color:gold;}#two, #four, #six {
    background-color:forestgreen;}#bag > :nth-child(2) {
    top:-200px;
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);}#bag > :nth-child(3) {
    top:-400px;
    transform:rotate(60deg);
    transform:rotate(60deg);}#bag > div:nth-child(4) {
    top:-600px;
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);}#bag > :nth-child(5) {
    top:-800px;
    -webkit-transform:rotate(120deg);
    transform:rotate(120deg);}#bag > :nth-child(6) {
    top:-1000px;
    -webkit-transform:rotate(150deg);
    transform:rotate(150deg);}#bag:nth-of-type(2){
    transform:scale(-1);
    transform-origin:50% 50%;}#green-center {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:forestgreen;
    position: relative;
    top:-300px;
    left:100px;}

<div id="bag">
    <div class="cont">
        <a href="http://example.com/"><div id="one"></div></a>
    </div>
    <div class="cont">
        <div id="two">ABC</div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="three"></div></a>
    </div>
    <div class="cont">
        <div id="four"></div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="five"></div></a>
    </div>
    <div class="cont">
        <div id="six"></div>
    </div></div><div id="bag">
    <div class="cont">
        <a href="http://example.com/"><div id="one"></div></a>
    </div>
    <div class="cont">
        <div id="two"></div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="three"></div></a>
    </div>
    <div class="cont">
        <div id="four"></div>
    </div>
    <div class="cont">
        <a href="http://example.com/"><div id="five"></div></a>
    </div>
    <div class="cont">
        <div id="six"></div>
    </div></div><div id="green-center">