<div class="form">
  <p>Введіть нові значення, щоб змінити координати обрізання блоку нижче:</p>
  <input type="number" min="0" placeholder="top" name="top" onchange="clipBlock(this.name, this.value)">
  <input type="number" min="0" placeholder="right" name="right" onchange="clipBlock(this.name, this.value)">
  <input type="number" min="0" placeholder="bottom" name="bottom" onchange="clipBlock(this.name, this.value)">
  <input type="number" min="0" placeholder="left" name="left" onchange="clipBlock(this.name, this.value)">
</div>

<div class="wrapper">
  <div id="block">
    <p>Це обрізаний блок!</p>
  </div>
</div>
.form {
  margin: 16px 0;
  text-align: center;
  padding-bottom: 36px;
  border-bottom: 2px dashed #666;
}

.form input[type=number] {
  padding: 6px 12px;
}

p {
  color: #222;
  font-family: monospace;
  font-size: 16px;
}

.wrapper {
  position: relative;
  height: 250px;
}

#block {
  background-color: #eee;
  border: 2px solid #666;
  width: 250px;
  height: 150px;
  text-align: center;
  line-height: 120px;
  position: absolute;
  top: 16px;
  left: 16px;
}
var block = document.getElementById('block');
var newVal = {'top':     0,
              'right':   0,
              'bottom':  0,
              'left':   0,};

function clipBlock(field, value) {
  newVal[field] = value;
  block.style.clip = 'rect('+newVal['top']+'px, '+newVal['right']+'px, '+newVal['bottom']+'px, '+newVal['left']+')';
  console.log(newVal);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.