You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.0 KiB
97 lines
3.0 KiB
1 year ago
|
|
||
|
|
https://codepen.io/jh3y/pen/aQomdd
|
||
|
|
|
||
|
|
<div class="pie">
|
||
|
|
<div class="pie__segment" style="--offset: 0; --value: 25; --bg: #db0a5b;"></div>
|
||
|
|
<div class="pie__segment" style="--offset: 25; --value: 10; --bg: #22a7f0;"></div>
|
||
|
|
<div class="pie__segment" style="--offset: 35; --value: 60; --bg: #2ecc71; --over50: 1;"></div>
|
||
|
|
<div class="pie__segment" style="--offset: 95; --value: 5; --bg: #4d05e8;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="actions">
|
||
|
|
<label>Offset</label>
|
||
|
|
<label>Value</label>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="0"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="25"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="25"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="10"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="35"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="60"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="95"/>
|
||
|
|
<input type="number" min="0" max="360" step="1" value="5"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
.pie {
|
||
|
|
border-radius: 100%;
|
||
|
|
height: calc(var(--size, 200) * 1px);
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
width: calc(var(--size, 200) * 1px);
|
||
|
|
}
|
||
|
|
.pie__segment {
|
||
|
|
--a: calc(var(--over50, 0) * -100%);
|
||
|
|
--b: calc((1 + var(--over50, 0)) * 100%);
|
||
|
|
--degrees: calc((var(--offset, 0) / 100) * 360);
|
||
|
|
-webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
|
||
|
|
clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
|
||
|
|
transform-origin: 50% 100%;
|
||
|
|
width: 100%;
|
||
|
|
z-index: calc(1 + var(--over50));
|
||
|
|
}
|
||
|
|
.pie__segment:after,
|
||
|
|
.pie__segment:before {
|
||
|
|
background: var(--bg, #e74c3c);
|
||
|
|
content: '';
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.pie__segment:before {
|
||
|
|
--degrees: calc((var(--value, 45) / 100) * 360);
|
||
|
|
transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
|
||
|
|
transform-origin: 50% 0%;
|
||
|
|
}
|
||
|
|
.pie__segment:after {
|
||
|
|
opacity: var(--over50, 0);
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
align-items: center;
|
||
|
|
background: #111;
|
||
|
|
color: #fafafa;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1rem;
|
||
|
|
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
font-size: 1rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
min-width: 80px;
|
||
|
|
}
|
||
|
|
.actions {
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 4px;
|
||
|
|
grid-template-columns: auto auto;
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
|
||
|
|
const pie = document.querySelector('.pie');
|
||
|
|
const actions = document.querySelector('.actions');
|
||
|
|
const segments = pie.children;
|
||
|
|
|
||
|
|
const updateSegment = e => {
|
||
|
|
const idx = [...actions.children].indexOf(e.target);
|
||
|
|
const key = idx % 2 === 0 ? 'offset' : 'value';
|
||
|
|
const toUpdate = segments[Math.floor(idx / 2) - 1];
|
||
|
|
toUpdate.style.setProperty(`--${key}`, e.target.value);
|
||
|
|
};
|
||
|
|
window.addEventListener('input', updateSegment);
|