Четверть кольца с CSS и HTML

Я пытаюсь создать форму кольца в css, разделенную на 4 четверти. Каждая четверть будет представлять собой кнопку.

Я играл со следующим кодом:

#quarterCircleTopLeft{
     width:100px;
     height:100px;
     border:1px solid #000;
     background: orange;
     border-radius: 90px 0 70px 0;
     -moz-border-radius: 90px 0 70px 0;
     -webkit-border-radius: 90px 0 70px 0;
}

Что производит это (не обращайте внимания на серые линии):

введите здесь описание изображения

Очевидно, я хочу, чтобы граница справа внизу была инвертирована. Однако, поскольку это кнопка, я не могу использовать другую форму для создания выреза (так как это будет перекрываться с другими кнопками меню). Я добавил красную линию, чтобы примерно показать, как должна проходить граница. Извините, мои навыки рисования плохие :-P

Как я могу инвертировать границу или каким-то другим способом создать нужную мне форму?


html css css-shapes
person Mythio    schedule 28.04.2013    source источник

Ответы (4)


arrow_upward
11
arrow_downward

Я бы сделал что-то вроде:

http://dabblet.com/gist/5476973

Короче говоря, много радиуса границы + белый круг поверх всего.

В моем примере я бы затем привязывал события кликов к элементам div с помощью javascript или просто делал их всеми элементами <a> и добавлял элемент display:block;.

/**
* Quarter Circles
*/

.main {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.quarter {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: background-color 0.2s ease-in-out;
}
.quarter:hover {
  background-color: pink;
}
.quarter1 {
  top: 0;
  left: 0;
  background-color: red;
  border-radius: 100% 0 0 0;
}
.quarter2 {
  top: 0;
  right: 0;
  background-color: blue;
  border-radius: 0 100% 0 0;
}
.quarter3 {
  bottom: 0;
  left: 0;
  background-color: orange;
  border-radius: 0 0 0 100%;
}
.quarter4 {
  bottom: 0;
  right: 0;
  background-color: green;
  border-radius: 0 0 100% 0;
}
.cutout {
  width: 50%;
  height: 50%;
  background-color: white;
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  pointer-events: none;
}
<div class="main">
  <div class="quarter quarter1"></div>
  <div class="quarter quarter2"></div>
  <div class="quarter quarter3"></div>
  <div class="quarter quarter4"></div>
  <div class="cutout"></div>
</div>

person Rich Bradshaw    schedule 28.04.2013
comment
Это очень полезно, спасибо. Я заметил, что при перемещении мыши из центра (вырезки) в одну из четвертей она, похоже, не реагирует прямо на границе круга. Вам нужно продвинуться немного дальше к центру квартала. Кроме того, это расстояние кажется разным для каждой четверти. Любая идея, что вызывает это? - person Mythio; 28.04.2013
comment
Хм, у меня Chrome 28 на OSX, и, похоже, такой проблемы нет. Если есть проблема, это, вероятно, потому, что внутренний «круг» представляет собой квадрат с закругленными углами. Возможно, ваш браузер ведет себя так, как будто это квадрат. Я добавил pointer-events:none; во внутренний круг — лучше? - person Rich Bradshaw; 28.04.2013
comment
Хм да лучше, хотя теперь и кнопка светится белым пробелом. Я думаю, что он действительно считает формы квадратами. Я использую последнюю версию Chrome, я думаю (26, она обновлена). - person Mythio; 28.04.2013
comment
Ах да, забыл, поэтому я не вставил это с самого начала! 26 — последняя стабильная версия. Без использования SVG для этого (что, безусловно, возможно), тогда это так хорошо, как вы получите. - person Rich Bradshaw; 28.04.2013
comment
Вы имеете в виду использовать изображения для представления кварталов? Я мог бы сделать это, это не сложно. Спасибо за помощь с этим кодом, я попробую и посмотрю, что работает лучше. - person Mythio; 28.04.2013
comment
Однако помните, что по крайней мере в Chrome 28 это работает нормально. Возможно, стоит проверить другие места. Если вы используете CSS3PIE, это, вероятно, будет работать даже в IE6. - person Rich Bradshaw; 28.04.2013
comment
Добавлен код из dabblet в ответ, чтобы предотвратить потерю хорошего ответа из-за возможной гниения ссылки в будущем. - person Harry; 08.05.2015

arrow_upward
2
arrow_downward

Вот решение ‹svg›.

Svg имеет свой собственный элемент ‹a› svg.
Просто нажмите на углы, и вы найдете потрясающую документацию ;)
Шутки в сторону Ссылка a работает с фигурой, поэтому фигура получает link.
Это оставляет пустое пространство внутри формы, которое будет показывать что-либо позади него.

<svg width="150px" height="150px" viewbox="-1 -1 102 102">
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="tomato" fill="orange" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="darkRed" fill="red" transform="translate(100, 0) rotate(90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="DarkBlue" fill="blue" transform="translate(100, 100) rotate(180)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
    <path stroke="darkGreen" href="#" fill="green" transform="translate(0, 100) rotate(-90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20 
                                         C 31 20 20 31 20 50Z" />
  </a>
</svg>

person Persijn    schedule 08.05.2015
comment
Спасибо за решение SVG. Вы даже можете применять стили :hover к элементам SVG, что делает этот ответ идеальным решением. - person Lars Gyrup Brink Nielsen; 26.05.2015

arrow_upward
1
arrow_downward

я смог улучшить 1-й ответ и избежать реакции кольца, когда мышь находится в зоне отсечки.

http://codepen.io/a-zaki/pen/rLRyAm

/**
* Quarter Circles
*/

.main {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.quarter {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: background-color 0.2s ease-in-out;
  z-index: 1;
}
.quarter:hover {
  background-color: pink;
}
.quarter1 {
  top: 0;
  left: 0;
  background-color: red;
  border-radius: 100% 0 0 0;
}
.quarter2 {
  top: 0;
  right: 0;
  background-color: blue;
  border-radius: 0 100% 0 0;
}
.quarter3 {
  bottom: 0;
  left: 0;
  background-color: orange;
  border-radius: 0 0 0 100%;
}
.quarter4 {
  bottom: 0;
  right: 0;
  background-color: green;
  border-radius: 0 0 100% 0;
}
.cutout {
  width: 50%;
  height: 50%;
  background-color: white;
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  border: 3px solid #000;
  z-index: 2;
}
<div class="main">
  <div class="quarter quarter1"></div>
  <div class="quarter quarter2"></div>
  <div class="quarter quarter3"></div>
  <div class="quarter quarter4"></div>
  <div class="cutout"></div>
</div>

person azaki    schedule 02.11.2016

arrow_upward
0
arrow_downward

В Safari это должно работать:

<!DOCTYPE html>
<html>
<head>
<style> 
  div {
    width: 40px;
    height: 40px;
    border: solid;
    border-radius: 100px 0 0 0;
    border-width: 30px 30px 0;
    border-right: hidden;
  }
</style>
<title>Quatre Circle Outline</title>
</head>
<body>
    <div></div>
</body>
</html>
person Lukas Schmale    schedule 19.02.2021