.wrap
<span id="result"> </span>
#blob
.controls
.height
%input#height.radius{:max => "200", :min => "0", :step => "1", :type => "range", :value => "200"}/
.width
%input#width.radius{:max => "200", :min => "0", :step => "1", :type => "range", :value => "200"}/
.topleft
%input#topLeft.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
%input#topLeft2.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
.topright
%input#topRight.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
%input#topRight2.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
.bottomright
%input#bottomRight.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
%input#bottomRight2.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
.bottomleft
%input#bottomLeft.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
%input#bottomLeft2.radius{:max => "2000", :min => "0", :step => "1", :type => "range", :value => "500"}/
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
.wrap{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#222;
span#result {
display: inline-block;
width: 100%;
text-align: center;
position: absolute;
top: 50px;
color: #999;
font-size: 14px;
font-family:"Source Code Pro";
}
.controls{
position:absolute;
width:400px;
height:400px;
left:calc(50% - 200px);
top:calc(50% - 200px);
div{
width:150px;
position:absolute;
&.height{
width:calc(100% + 20px);
left:-250px;
bottom:190px;
transform:rotate(-90deg);
&:before{
content:'Height';
}
}
&.width{
width:calc(100% + 20px);
bottom:-50px;
left:-10px;
&:before{
content:'Width';
top:30px;
}
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
margin-bottom:10px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50px;
cursor: pointer;
margin-top: -8px;
background:#ccc;
}
input[type=range]:focus::-webkit-slider-thumb:hover{
background:#367ebd;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1px;
cursor: pointer;
background: #555;
border-radius: 1.3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input{
width:100%;
}
&:before{
color:#666;
font-family:"Source Code Pro";
position:absolute;
width:100%;
text-align:center;
top:-25px;
}
&.topleft{
&:before{
content:'Top Left';
}
}
&.topright{
right:0;
top:0;
&:before{
content:'Top Right'
}
}
&.bottomright{
right:0;
bottom:0;
&:before{
content:'Bottom Right';
}
}
&.bottomleft{
left:0;
bottom:0;
&:before{
content:'Bottom Left';
}
}
}
}
#blob{
--topLeft: 500;
--topLeft2: 500;
--topRight: 500;
--topRight2: 500;
--bottomLeft: 500;
--bottomLeft2: 500;
--bottomRight: 500;
--bottomRight2: 500;
--blobHeight: 200;
--blobWidth: 200;
z-index:999;
position:absolute;
width:calc( 1px * var(--blobWidth));
height:calc( 1px * var(--blobHeight));
left:calc(50% - ((var(--blobWidth) * 1px) / 2));
top:calc(50% - ((var(--blobHeight) * 1px) / 2));
transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
background:#15f9cd;
border-radius:calc( 1px * var(--topLeft)) calc( 1px * var(--topRight)) calc( 1px * var(--bottomRight)) calc( 1px * var(--bottomLeft)) / calc( 1px * var(--topLeft2)) calc( 1px * var(--topRight2)) calc( 1px * var(--bottomRight2)) calc( 1px * var(--bottomLeft2));
}
}
}
const Blob = document.querySelector('#blob');
const topLeft = document.querySelector('#topLeft');
topLeft.addEventListener('input', e => {
Blob.style.setProperty('--topLeft', topLeft.value);
});
const topLeft2 = document.querySelector('#topLeft2');
topLeft2.addEventListener('input', e => {
Blob.style.setProperty('--topLeft2', topLeft2.value);
});
const topRight = document.querySelector('#topRight');
topRight.addEventListener('input', e => {
Blob.style.setProperty('--topRight', topRight.value);
});
const topRight2 = document.querySelector('#topRight2');
topRight2.addEventListener('input', e => {
Blob.style.setProperty('--topRight2', topRight2.value);
});
const bottomRight = document.querySelector('#bottomRight');
bottomRight.addEventListener('input', e => {
Blob.style.setProperty('--bottomRight', bottomRight.value);
});
const bottomRight2 = document.querySelector('#bottomRight2');
bottomRight2.addEventListener('input', e => {
Blob.style.setProperty('--bottomRight2', bottomRight2.value);
});
const bottomLeft = document.querySelector('#bottomLeft');
bottomLeft.addEventListener('input', e => {
Blob.style.setProperty('--bottomLeft', bottomLeft.value);
});
const bottomLeft2 = document.querySelector('#bottomLeft2');
bottomLeft2.addEventListener('input', e => {
Blob.style.setProperty('--bottomLeft2', bottomLeft2.value);
});
const blobHeight = document.querySelector('#height');
blobHeight.addEventListener('input', e => {
Blob.style.setProperty('--blobHeight', blobHeight.value);
});
const blobWidth = document.querySelector('#width');
blobWidth.addEventListener('input', e => {
Blob.style.setProperty('--blobWidth', blobWidth.value);
});
$( '.radius' ).change(function() {
var radius = $("#blob").css( "border-radius" );
$( "#result" ).html( "Border Radius: <span style='color:" +
radius + ";'>" + radius + "</span>" );
});
External CSS
This Pen doesn't use any external CSS resources.