<div class="box"></div>
<div class="actions">
<div class="control">
<label for="border-radius">border-radius:</label>
<input type="range" id="border-radius" min="0" max="100" value="50" step="10" />
<output data-border-radius>50px</output>
</div>
<div class="control">
<label for="border-top-width">border-top-width:</label>
<input type="range" id="border-top-width" min="0" max="100" value="50" step="10" />
<output data-border-top-width>50px</output>
</div>
<div class="control">
<label for="border-right-width">border-right-width:</label>
<input type="range" id="border-right-width" min="0" max="100" value="50" step="10" />
<output data-border-right-width>50px</output>
</div>
<div class="control">
<label for="border-bottom-width">border-bottom-width:</label>
<input type="range" id="border-bottom-width" min="0" max="100" value="50" step="10" />
<output data-border-bottom-width>50px</output>
</div>
<div class="control">
<label for="border-left-width">border-left-width:</label>
<input type="range" id="border-left-width" min="0" max="100" value="50" step="10" />
<output data-border-left-width>50px</output>
</div>
<div class="control">
<label for="padding-top">padding-top:</label>
<input type="range" id="padding-top" min="0" max="100" value="50" step="10" />
<output data-padding-top>50px</output>
</div>
<div class="control">
<label for="padding-right">padding-right:</label>
<input type="range" id="padding-right" min="0" max="100" value="50" step="10" />
<output data-padding-right>50px</output>
</div>
<div class="control">
<label for="padding-bottom">padding-bottom:</label>
<input type="range" id="padding-bottom" min="0" max="100" value="50" step="10" />
<output data-padding-bottom>50px</output>
</div>
<div class="control">
<label for="padding-left">padding-left:</label>
<input type="range" id="padding-left" min="0" max="100" value="50" step="10" />
<output data-padding-left>50px</output>
</div>
<ul>
<li>border</li>
<li>padding</li>
<li>content</li>
</ul>
</div>
body {
background-color: #1d1e1f;
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
:root {
--border-radius: 50px;
--border-top-width: 30px;
--border-right-width: 30px;
--border-bottom-width: 30px;
--border-left-width: 30px;
--padding-top: 30px;
--padding-right: 30px;
--padding-bottom: 30px;
--padding-left: 30px;
}
.box {
margin: 5px;
width: 480px;
height: 480px;
box-sizing: border-box;
background-image: linear-gradient(134deg, #3023ae 0%, #c86dd7 100%),
linear-gradient(134deg, #fad961 0%, #f76b1c 100%),
linear-gradient(134deg, #f5515f 0%, #f5515f 100%);
background-origin: padding-box;
background-clip: content-box, padding-box, border-box;
border-color: transparent;
border-style: solid;
border-radius: var(--border-radius);
border-width: var(--border-top-width) var(--border-right-width)
var(--border-bottom-width) var(--border-left-width);
padding: var(--padding-top) var(--padding-right) var(--padding-bottom)
var(--padding-left);
}
.actions {
display: flex;
flex-direction: column;
color: #fff;
font-size: 1.5rem;
}
.control {
display: flex;
align-items: center;
margin-bottom: 10px;
}
label {
min-width: 300px;
text-align: right;
margin-right: 10px;
}
ul {
margin: 20px 0 0;
padding: 0;
list-style: none outside none;
display: flex;
flex-direction: column;
}
li {
display: flex;
align-items: center;
text-align: right;
max-width: 300px;
margin-bottom: 10px;
justify-content: flex-end;
}
li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 10px;
}
li:nth-child(1)::before {
background: linear-gradient(134deg, #f5515f 0%, #f5515f 100%);
}
li:nth-child(2)::before {
background: linear-gradient(134deg, #fad961 0%, #f76b1c 100%);
}
li:nth-child(3)::before {
background: linear-gradient(134deg, #3023ae 0%, #c86dd7 100%);
}
output {
margin-left: 5px;
}
View Compiled
const inputs = document.querySelectorAll("input");
const documentElement = document.documentElement;
inputs.forEach((item, index) => {
item.addEventListener("change", (etv) => {
documentElement.style.setProperty(
`--${etv.target.id}`,
`${etv.target.value}px`
);
document.querySelector(
`output[data-${etv.target.id}]`
).textContent = `${etv.target.value}px`;
});
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.