Сегменты по кругу с помощью CSS3

Я знаю, что вы можете сделать круг в CSS3, используя хак с радиусом границы. Но есть ли способ заставить их иметь сегменты, подобные этой картинке? Есть ли способ сделать это через HTML и CSS, но не через JS?

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

css css-shapes

Games Brainiac 06.01.2013 источник

comment

Вы могли бы сделать это с помощью небольших элементов и преобразований вращения CSS, но это кажется довольно болезненным. - Pointy 06.01.2013

comment

Мистер Пойнти, пожалуйста, скажите мне, как... Я действительно хочу знать! :) Пветти, пожалуйста, с кусочками сахара сверху! :) - Games Brainiac 06.01.2013

comment

Ну, я не эксперт по преобразованию CSS, но вы в основном делаете <div> элементов (или что-то еще), которые будут оформлены как короткие сегменты линии, а затем вы вращаете и переводите их в круг. Это просто практика аналитической геометрии :-) Вот страница MDN о том, что могут делать преобразования . - Pointy 06.01.2013

comment

О, подождите, вы спрашиваете о том, как рисовать сегменты радиальной линии внутри круга? Если так, то я совершенно неправильно понял; Я думал, ты пытаешься нарисовать сам круг. - Pointy 06.01.2013

comment

Да, сегменты внутри круга. Это то, чего я хотел. Моя диаграмма вводит в заблуждение? Я хочу, чтобы каждый сегмент выделялся при наведении курсора. - Games Brainiac 06.01.2013

comment

Это может быть возможно, но это, вероятно, довольно сложно. Возможно, было бы проще использовать <canvas> или SVG; я подозреваю, что у вас будут проблемы с кросс-браузерностью, независимо от того, как вы к этому подойдете. - Pointy 06.01.2013

Ответы (4)

arrow_upward
55
arrow_downward

Да, вы можете получить такие фрагменты нестандартных углов одним из следующих двух способов:

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

Для № 2 см. также очень упрощенный пример, который я сделал прямо сейчас .

.pie {
  overflow:hidden;
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em; height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%; 
}
.slice:first-child {
  transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: lightblue;
}
.slice:first-child .slice-contents {
  transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: violet; } /* highlight on hover */

<ul class='pie'>
  <li class='slice'>
    <div class='slice-contents'></div>
  </li>
  <!-- you can add more slices here -->
</ul>

Ana 06.01.2013

comment

круговое меню исчезло :( - Adam; 25.12.2018

comment

@Adam, вероятно, похожий дабблет, показывающий, как работает идея dabblet.com/gist/5020696 ... вероятно поздний комментарий, но раньше его не видел ;) тоже может выглядеть как цитрусовые codepen.io/gcyrillus/ ручка/wutEK - G-Cyrillus; 26.10.2019

arrow_upward
8
arrow_downward

Да, вы можете: http://jsfiddle.net/elias94xx/3rx7w/, http://jsfiddle.net/elias94xx/3rx7w/2/

#chart {
  width: 0;
  height: 0;
  border-right: 60px solid purple;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

<div id="chart"></div>

.chart {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right: 60px solid red;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart2 {
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart3 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid blue;
  border-bottom: 60px solid transparent;
}

#chart4 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid yellow;
}

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

Источник: http://www.paulund.co.uk/how-to-create-different-shapes-in-css

Community 06.01.2013

arrow_upward
5
arrow_downward

Вы можете использовать элемент html li и немного CSS transform для представления каждого фрагмента круга.

Сложная часть - это transform. В данном случае я разделил круг на 5 частей. Расчет следующий. 360/5=72 -> rotate 72+90=162 -> skewY

.sliceWrapper {
  position: relative;
  border: 1px solid black;
  padding: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}

.slice {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
}

li {
  overflow: hidden;
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  transform-origin: 0% 100%;
}

li:first-child {
  transform: rotate(0deg) skewY(162deg);
}

li:nth-child(2) {
  transform: rotate(72deg) skewY(162deg);
}

li:nth-child(3) {
  transform: rotate(144deg) skewY(162deg);
}

li:nth-child(4) {
  transform: rotate(216deg) skewY(162deg);
}

li:nth-child(5) {
  transform: rotate(288deg) skewY(162deg);
}

li:first-child .slice {
  background: green;
}

li:nth-child(2) .slice {
  background: tomato;
}

li:nth-child(3) .slice {
  background: aqua;
}

li:nth-child(4) .slice {
  background: yellow;
}

li:nth-child(5) .slice {
  background: blue;
}

<ul class="sliceWrapper">
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
</ul>

daniel.szaniszlo 20.01.2019

arrow_upward
2
arrow_downward

Вы можете использовать конический градиент

Конические градиенты в основном охватывают форму, как круг, от 0° до 360°.

Вот базовый конический градиент с кругом:

div {
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: red; /* fallback */
    background: conic-gradient(red, orange, yellow, green, blue, purple);
}

<div></div>

Используя точки цвета, мы можем волшебным образом превратить его в сегменты:

div {
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: red; /* fallback */
    background: conic-gradient(red 10%, orange 10%, orange 30%, yellow 30%, yellow 50%, green 50%, green 60%, blue 60%, blue 70%, purple 70%);
}

<div></div>

При желании, если нам нужен только один фрагмент, теперь мы можем изменить это, чтобы у нас был только один цвет, и теперь все готово :)

div {
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: red; /* fallback */
    background: conic-gradient(#0000 40%, red 40%, red 70%, #0000 70%);
}

<div></div>

corn on the cob 29.10.2020

Сегменты по кругу с помощью CSS3

Ответы (4)

Вопросы по теме