Как создать круг со ссылками на границе

Я пытаюсь сделать круг как этот. Я смог сделать это на скрипке, но проблема в том, что мне нужно, чтобы каждая оранжевая сторона была ссылкой, и я не могу делать это с помощью границ. Если кто-то может мне помочь, я буду очень благодарен.

#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>

Ответ 1

Ключом к созданию круга с сегментами является поиск точек по кругу, которые будут использоваться в элементах SVG path в качестве координат. Найти точки на круге можно легко с помощью тригонометрических уравнений, если мы знаем углы.

X Координата точки = радиус окружности * Cos (угол в радианах) + X Координата центральной точки

Y Координата точки = радиус круга * Sin (угол в радианах) + Y Координата центральной точки

Угол в радианах = угол в градусах * Math.PI/180

Углы зависят от нет. сегментов, которые мы должны создать. Общая формула (360/нет сегментов). Таким образом, чтобы создать круг с 6 сегментами, угол, охватываемый каждым сегментом, будет составлять 60 градусов. Первый сегмент будет охватывать от 0 до 60 градусов, второй от 60 до 120 градусов и т.д.

Демонстрация круга с 6 сегментами:

Ниже таблица показывает, как точки вычисляются для круга с 6 сегментами (где радиус круга равен 50, центральная точка - 55,55):

Как только точки вычисляются, кодирование самой path прост. Путь должен начинаться и заканчиваться в центральной точке (то есть 50,50), от центральной точки, мы должны сначала нарисовать линию от точки и оттуда провести дугу к точке Точка. Ниже приведен пример образца path:

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />

svg {
  height: 220px;
  width: 220px;
}
path {
  fill: transparent;
  stroke: black;
}

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' />
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' />
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' />
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' />
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' />
</svg>

Ответ 2

Вы можете использовать svg arc для создания разделов и тегов привязки 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>

Ответ 3

Подход, основанный только на 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">

Ответ 4

Вы можете использовать карту, например:

#circle{
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
    background:green;
}

#mappinglink{
    position:absolute;
    top:0px;
    left:0px;
}

#incircle{
    width:100px;
    height:100px;
    border-radius:50%;
    border:50px dotted orange;
    border-spacing: 10px 50px;
}

<div id="circle">
    <div id="incircle"></div>
    <img id="mappinglink" width="200" height="200" usemap="#mymap" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
    <map name="mymap">
        <area  alt="" title="" href="#" shape="poly" coords="29,28,71,3,84,50,64,64" style="outline:none;" target="_self"     />
        <area  alt="" title="" href="#" shape="poly" coords="148,12,122,55,142,73,184,46" style="outline:none;" target="_self"     />
        <area  alt="" title="" href="#" shape="poly" coords="149,96,199,93,192,142,146,121" style="outline:none;" target="_self"     />
        <area  alt="" title="" href="#" shape="poly" coords="105,149,128,141,159,180,112,200" style="outline:none;" target="_self"     />
        <area  alt="" title="" href="#" shape="poly" coords="59,133,79,147,65,193,23,164" style="outline:none;" target="_self"     />
        <area  alt="" title="" href="#" shape="poly" coords="48,87,50,108,3,120,4,71" style="outline:none;" target="_self"     />
    </map>
</div>

Ответ 5

Попробуйте этот чистый css:

*{box-sizing: border-box;padding: 0; margin: 0}
nav,nav:before{
    border-radius:50%;
    background:green
}
nav{
    width:200px;
    height:200px;
    margin: 40px auto;
    position: relative;
    overflow: hidden
}
nav:before{
    content: '';
    position:absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    z-index: 2;
    transform: translate3d(-50%,-50%,0)
}
#incircle{
    width:100px;
    height:100px;
    border-radius:50%;
    border:50px dotted orange;
}

nav a{
    position: absolute;
    z-index: 1;
    cursor: pointer;
    width: 0px;
    height: 0px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent
}
nav a:nth-child(3),nav a:nth-child(4){
    left: 70px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent
}

nav a:first-child{
    top: 70px;
    left: 0;
    border-left: 100px solid orange
}
nav a:nth-child(2){
    left: 20px;
    border-left: 100px solid orange;
    top: 20px;
    transform: rotateZ(60deg);
}
nav a:nth-child(3){
    transform: rotateZ(30deg);
    top: 0px;
    left: 86px;
    border-top: 100px solid orange;
}
nav a:nth-child(4){
    left: 46px;
    border-bottom: 100px solid orange;
    bottom: -4px;
    transform: rotateZ(28deg);
}
nav a:nth-child(5){
    right: 24px;
    border-right: 100px solid orange;
    bottom: 20px;
    transform: rotateZ(60deg);
}
nav a:last-child{
    top: 70px;
    right: 0;
    border-right: 100px solid orange
}

<nav> 
    <a></a>
    <a></a>
    <a></a>
    
    <a></a>
    <a></a>
    <a></a>
</nav>

Ответ 6

Здесь скрипка.

HTML

<div id="circle">
    <a id='left' href='left'></a>
    <a id='right' href='right'></a>
    <div id="mid"></div>
</div>

CSS

#circle{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

a {
    height: 100%;
    width: 49%;
    background: orange;
    display: block;
}

#left {
    float: left;
}

#right {
    float: right;
}

#mid {
    border-radius: 50%;
    background: green;
    border: 4px solid white;
    position: absolute;
    display: block;
    height: 50%;
    width: 50%;
    left: 24%;
    top: 24%;
}

Это может быть тривиально расширено до 4 частей вместо 2, разделив a по вертикали. Однако я рекомендую вам посмотреть на что-то вроде RaphaelJS , Вы даже можете обмануть и использовать круговую диаграмму

Ответ 7

Я пытался использовать чистые css, И придумал это:

.wrap {
  height: 200px;
  width: 200px;
  background: red;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.wrap:after {
  position: absolute;
  height: 50%;
  width: 50%;
  content: "";
  border-radius: 50%;
  background: green;
  left: 25%;
  top: 25%;
}
.slice {
  height: 0;
  width: 0;
  border-left: 200px solid blue;
  border-top: 200px solid transparent;
  position: absolute;
  top: -100px;
  left: -100px;
}
.part2 {
  border-left: 200px solid red;
  border-top: 200px solid transparent;
  transform: rotate(180deg);
  top: -100px;
  left: -100px;
}
.part3 {
  border-left: 200px solid pink;
  border-top: 200px solid transparent;
  transform: rotate(90deg);
  top: -100px;
  left: 100px;
}

<div class="wrap">
  <a href="#" class="slice"></a>
  <div class="slice part2"></div>
  <a href="#" class="slice part3"></a>
</div>

Ответ 8

Это похоже на работу для SVG. Он имеет свой собственный <a>, который может содержать произвольные формы.