4

Как реализовать такой градиент Есть свойства градиента

background-image: linear-gradient(to right,transparent 77%,#d7d8df 0 100%), linear-gradient(to right,#8fde90,#b6cf74,#e3be54,#F41840);

background: linear-gradient(to right,transparent 33%,#ffffff 33%);

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

1

2 ответа 2

7

Если использовать возможности CSS3, то задача реализуется довольно просто (conic-gradient в помощь). Не PixelPerfect, но довольно близко:

function fSetPercents(ev) {
  let val = (typeof ev === 'object') ? ev.target.value : ev;
  let oWrap = document.querySelector('.wrap');
  oWrap.style.setProperty('--percent', val)
  oWrap.querySelector('.percent span').textContent = `${val}%`;
}
// Можно назначить функцию в обработчике
document.querySelector('[type="range"]').addEventListener('input', fSetPercents);
// Можно явно задать значение, передав число
fSetPercents(50);
body {
  margin: 0; min-height: 100vh;
  display: flex; justify-content: space-around; align-items: center;
}

.wrap {
  --percent: 50;
  display: flex; justify-content: center; align-items: center;
  height: 600px;
  width: 600px; /* или aspect-ratio: 1 / 1; */
  border-radius: 50%;
  background-image: radial-gradient( circle at center, #f5f6f8 50%, #0000 51%, #0000 60%, #f5f6f8 61%), repeating-conic-gradient( #f5f6f8 0deg 0.3deg, #8880 0.7deg 0.8deg, #f5f6f8 1.2deg 1.5deg), conic-gradient( #0000 calc(3.6deg * var(--percent)), #ced2d5 calc(3.6deg * var(--percent))), conic-gradient(#9ce5b0, #c6a967, #f00);
}

.percent {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  height: 350px;
  width: 350px; /* или aspect-ratio: 1 / 1; */
  border-radius: 50%;
  font: bold 100px sans-serif;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 30px -10px #0004;
}
<div class="wrap">
  <div class="percent"><span>50%</span><input type="range"></div>
</div>

12
  • поглянь свой ответ в firefox ... 21 апр 2021 в 23:42
  • вот так это выглядит в нём: ibb.co/3TtpC5Y 21 апр 2021 в 23:48
  • @MaximLensky: ох, уж эта тормоzzzила... Поправил.
    – UModeL
    22 апр 2021 в 4:46
  • Можно это переписать в функцию на javascript ? 22 апр 2021 в 7:27
  • @svitalik1999gmailcom: вопрос непонятен.
    – UModeL
    22 апр 2021 в 7:29
-1

:root {
  font-size: 0px;
}

.wrap-lg {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

.quarter {
  width: 50%;
  height: 50%;
  display: inline-block;
  font-size: 0;
  background: black;
  overflow: hidden;
}

#center {
  width: 80%;
  height: 80%;
  background-color: white;
  position: relative;
  border-radius: 100%;
  margin: 10%;
  left: 0px;
  top: -100%;
}

.quarter::after,
.quarter::before {
  content: "";
  display: block;
  filter: blur(3px);
}

#lt {
  border-radius: 100% 0 0 0;
  background: linear-gradient(45deg, #ffb507 0%, #ff9800 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#lt::before {
  width: 20%;
  height: 90%;
  margin-left: 90%;
  background-color: #FF9800;
}

#lt::after {
  width: 20%;
  height: 20%;
  background-color: #ffc107;
}

#rt {
  border-radius: 0 100% 0 0;
  background: linear-gradient(135deg, #ff9800 0%, #ff0000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#rt::before {
  width: 20%;
  height: 90%;
  margin-left: -10%;
  background-color: #FF9800;
}

#rt::after {
  width: 110%;
  height: 20%;
  background-color: #ff0000;
}

#lb {
  border-radius: 0 0 0 100%;
  background: linear-gradient(135deg, #ffc107 0%, #ffeb3b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#lb::before {
  width: 100%;
  height: 20%;
  margin-left: -10%;
  background-color: #ffc107;
}

#lb::after {
  width: 20%;
  height: 20%;
  margin-left: 90%;
  margin-top: 70%;
  background-color: #ffeb3b;
}

#rb {
  border-radius: 0 0 100% 0;
  background: linear-gradient(45deg, #ffeb3b 0%, #00de07 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#rb::before {
  width: 100%;
  height: 20%;
  margin-top: -10%;
  background-color: #00de07;
}

#rb::after {
  width: 20%;
  height: 20%;
  margin-left: -10%;
  margin-top: 70%;
  background-color: #ffeb3b;
}
<div class="wrap-lg">
  <div id="lt" class="quarter"></div>
  <div id="rt" class="quarter"></div>
  <br>
  <div id="lb" class="quarter"></div>
  <div id="rb" class="quarter"></div>
  <div id="center"></div>
</div>

1
  • этот вариант не относится к решению 21 апр 2021 в 19:04

Ваш ответ

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

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