6

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

.canvas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  border-radius: 50%;
  width: 500px;
}

.unit {
  fill: none;
  stroke-width: 31.8;
}

.unit:nth-child(1) {
  stroke: #86cfa3;
  stroke-dasharray: 20 100;
}

.unit:nth-child(2) {
  stroke: #a2c6e0;
  stroke-dasharray: 20 100;
  stroke-dashoffset: -20;
}

.unit:nth-child(3) {
  stroke: #ffc7ec;
  stroke-dasharray: 20 100;
  stroke-dashoffset: -40;
}

.unit:nth-child(4) {
  stroke: #8a9aed;
  stroke-dasharray: 20 100;
  stroke-dashoffset: -60;
}

.unit:nth-child(5) {
  stroke: #ccc;
  stroke-dasharray: 20 100;
  stroke-dashoffset: -80;
}

#text {
  font-size: 0.2em;
}
<div class="canvas">
  <svg class="chart" width="500" height="500" viewBox="0 0 50 50">
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    </svg>
</div>

10
  • 1
    Что Вы уже сделали? В чём конкретно возникло затруднение?
    – UModeL
    24 ноя 2020 в 17:14
  • 1
    Здравствуйте . проблема в самой верстке . Ничего не выходит . Три дня сижу но можно сказать что безрезультатно ((( 24 ноя 2020 в 17:16
  • 1
    добавьте хотя бы начальную разметку. Иначе заминусуют и закроют вопрос, а ответа не получите. И да, чтобы получить такие формы, скорее всего, нужно ещё немного SVG добавить - на чистом CSS тоже можно сделать, но кода получится целая простыня.
    – UModeL
    24 ноя 2020 в 17:20
  • 1
    rapprogtrain.com/editor/code/1229913839 @UModeL 24 ноя 2020 в 17:38
  • 2
    Спасибо вам огромное @UModeL просто безумно интересно как это реализовать . Хоть это и ней мой конек . Ну..интерес и любопытсво программиста ))) 24 ноя 2020 в 17:52

1 ответ 1

9

Фигуры сложной формы довольно затруднительно делать, используя только HTML и CSS, так как они изначально были созданы не для этого. А вот SVG, как раз для таких задач. Правда, есть несколько трудных моментов на этапе изучения. Также нужно немного освоить какой-либо простой векторный редактор, чтобы рисовать/обводить сами фигуры.

Затем, всё просто:

  • В векторном редакторе рисуем необходимую фигуру с нуля или открываем там же картинку и обводим нужные контуры.
  • Копируем значения пути фигуры (эта возможность зависит от используемого редактора) или сохраняем как SVG-файл, открываем его любым текстовым редактором и копируем значения пути;
  • В HTML-документе в теге <svg> создаём элемент <path> и в атрибут d этого элемента вставляем скопированный ранее путь.

Далее комментарии в коде.

Текст можно добавить или непосредственно в SVG (по примеру центрального блока) или позиционировать в CSS обычные параграфы:

body {margin:0;height:100vh;background-color:#034460;background-image:radial-gradient(#0000,#000f),linear-gradient(to right,#093349,#014e6c);background-position:0% 0%;background-repeat:no-repeat;background-size:auto;display:flex;justify-content:space-around;align-items:center}

svg { width: 90vh; /*height: 704px;*/ }

#sector { stroke: #fff; stroke-width: 2; }

.sector_1 {
  fill: url(#linear-gradient_1); transform-origin: 352px 350px;
  transform: rotate(0deg) translateX(-1px) translateY(-3px);
}
.sector_2 {
  fill: url(#linear-gradient_2); transform-origin: 352px 350px;
  transform: rotate(72deg) translateX(-1px) translateY(-3px);
}
.sector_3 {
  fill: url(#linear-gradient_3); transform-origin: 352px 350px;
  transform: rotate(144deg) translateX(-1px) translateY(-3px);
}
.sector_4 {
  fill: url(#linear-gradient_1); transform-origin: 352px 350px;
  transform: rotate(216deg) translateX(-1px) translateY(-3px);
}
.sector_5 {
  fill: url(#linear-gradient_2); transform-origin: 352px 350px;
  transform: rotate(288deg) translateX(-1px) translateY(-3px);
}

.circle { fill: #043e54; stroke: #fff; stroke-width: 2; }

.text { fill: #fff; font: bold 32px sans-serif; }
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 704 704">
  <!-- Секция так сказать заготовок, которые далее будут использованы несколько раз. -->
  <defs> 
    <!-- Этот фрагмент кода показывает один сектор, как можно было бы сделать на svg.
         Чтобы увидеть его отдельно, скопируйте его в отдельный файл и добавьте 
         width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" stroke="black" -->
    <!-- По сути, это наша основная фигура. -->
    <path id="sector" d="M 685 245 c 0 0 -43 14 -98 32 c -7 3 -27 -6 -19 -20 c 7 -14 -8 -24 -19 -20 c -14 4 -16 22 -4 27 c 14 6 4 26 -2 28 c -88 28 -184 59 -190 62 c 0 -7 0 -109 0 -200 c 0 -7 -16 -22 -26 -11 c -9 10 -25 2 -25 -12 c 0 -12 15 -24 25 -12 c 11 12 26 -5 26 -12 c 0 -58 0 -103 0 -103 c 155 0 287 101 332 242 l 0 0 c 0 0 0 0 0 -1 z" />
    <!-- Ниже располагаются градиенты. Они немного отличаются от CSS-градиентов, 
         поэтому приходится прописывать их здесь, а не встилях. Но, если 
         достаточно сплошного цвета, то можно удалить эту часть кода. -->
    <linearGradient id="linear-gradient_1">
      <stop offset="0%" stop-color="#007da4" />
      <stop offset="100%" stop-color="#02a0c7" />
    </linearGradient>
    <linearGradient id="linear-gradient_2">
      <stop offset="0%" stop-color="#093349" />
      <stop offset="100%" stop-color="#014e6c" />
    </linearGradient>
    <linearGradient id="linear-gradient_3">
      <stop offset="0%" stop-color="#911628" />
      <stop offset="100%" stop-color="#ae1c2f" />
    </linearGradient>
  </defs>
  <g>
    <g>
      <!-- Тут пригодилась наша заготовка для пяти секторов. 
           Поворот для каждого задаётся через классы в CSS стилях. -->
      <use xlink:href="#sector" class="sector_1"></use>
      <use xlink:href="#sector" class="sector_2"></use>
      <use xlink:href="#sector" class="sector_3"></use>
      <use xlink:href="#sector" class="sector_4"></use>
      <use xlink:href="#sector" class="sector_5"></use>
    </g>
    <g>
      <!-- Круг по центру и текст. Ничего сложного. Верно? ;-) -->
      <circle cx="352px" cy="352px" r="100px" class="circle" />
      <text class="text" x="50%" y="50%" dy=".35em" text-anchor="middle">IMPACT</text>
    </g>
  </g>
</svg>

Можно сделать всё только на CSS, но выходит довольно много кода и проблемы с масштабированием:

body {margin:0;height:100vh;background-color:#034460;background-image:radial-gradient(#0000,#000f),linear-gradient(to right,#093349,#014e6c);background-position:0% 0%;background-repeat:no-repeat;background-size:auto;display:flex;justify-content:space-around;align-items:center}

.diagram {
  position: relative;
  height: 704px; width: 704px;
}

.diagram>ul {
  list-style-type: none;
  position: relative;
  height: 100%; width: 100%;
  padding: 0; margin: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
  background-image: conic-gradient(#007da4 0deg, #02a0c7 72deg, #093349 72deg, #014e6c 144deg, #911628 144deg, #ae1c2f 216deg, #007da4 216deg, #02a0c7 288deg, #093349 288deg, #014e6c 359deg);
}

.diagram>ul>li {
  position: absolute;
  left: 50%; top: 50%;
  height: 50%; width: 50%;
  transform-origin: 0 0;
  border-radius: 0% 0% 100% 0%;
  box-shadow: inset 0 4px 0 -2px #fff;
}

.diagram .segment_1 { color: #007da4; transform: rotate(-90deg); }
.diagram .segment_2 { color: #093349; transform: rotate(-18deg); }
.diagram .segment_3 { color: #911628; transform: rotate(54deg); }
.diagram .segment_4 { color: #007da4; transform: rotate(126deg); }
.diagram .segment_5 { color: #093349; transform: rotate(198deg); }

.diagram b {
  position: relative;
  display: block;
  height: 100%;
}

.diagram b::before,
.diagram b::after {
  content: '';
  position: absolute;
  left: 60%; width: 10%;
  background-color: #0000;
}

.diagram b::before {
  top: calc(-15% + 4px);
  height: 10%;
  background-image: radial-gradient( circle, currentcolor calc(100% - 10px), #ffff calc(100% - 9px), #ffff calc(100% - 8px), #fff0 calc(100% - 7px));
  background-position: 0px 10px;
  background-repeat: no-repeat;
}

.diagram b::after {
  top: calc(-5% + 3px);
  height: 5%;
  background-image: radial-gradient( circle closest-corner at -10% 38%, #fff0 calc(100% - 0px), #ffff calc(100% - -1px), #ffff calc(100% - -2px), currentcolor calc(100% - -3px), currentcolor calc(100% - -18px), #fff0 calc(100% - -19px)), radial-gradient( circle closest-corner at 110% 38%, #fff0 calc(100% - 0px), #ffff calc(100% - -1px), #ffff calc(100% - -2px), currentcolor calc(100% - -3px), currentcolor calc(100% - -18px), #fff0 calc(100% - -19px));
  background-repeat: no-repeat;
}

.diagram .circle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  height: 34%; width: 34%;
  border-radius: 50%;
  font: bold calc(2vh + 3vw) sans-serif;
  box-shadow: inset 0 0 0 2px #fff;
  background-color: #043e54; color: #fff;
}
<div class="diagram">
  <ul>
    <li class="segment_1"><b></b></li>
    <li class="segment_2"><b></b></li>
    <li class="segment_3"><b></b></li>
    <li class="segment_4"><b></b></li>
    <li class="segment_5"><b></b></li>
  </ul>
  <div class="circle">IMPACT</div>
</div>

5
  • 1
    почему не масштабируется? :) это ж svg. И текст съезжает, если не на всю ширину
    – Grundy
    24 ноя 2020 в 22:57
  • @Grundy: потому, что такое искусство нужно смотреть на большом экране ;-р
    – UModeL
    24 ноя 2020 в 22:59
  • 1
    @UModeL вы просто лучший !!! Обьясните пожалуйста в двух словах что вы с пазлами сделали 25 ноя 2020 в 0:35
  • 1
    готово)))@Alexandr_TT 25 ноя 2020 в 22:07
  • @UModeL зачётный ответ! Кто конечно понимает, как это трудно было сделать. 29 ноя 2020 в 19:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.