<div class="module">
  <h2>I'm a notched module.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi minima neque sapiente itaque quos, mollitia facere earum laborum maxime vero voluptate repellendus quidem libero porro blanditiis obcaecati. Accusantium, sequi expedita.</p>
</div>

<input type="range" min="0" max="50" value="20">
@import url('https://fonts.googleapis.com/css?family=Lato|Roboto:700');

body {
  height: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
  color: #ffdebd;
  margin: 1rem;
  background: radial-gradient(
    circle farthest-corner,
    #333,
    #111
  );
  height: 100vh;
  overflow: hidden;
}

.module {
  max-width: 400px;
  padding: 3rem;
  background: #f06d06;
  
  --notchSize: 20px;
  
  clip-path: 
    polygon(
      0% var(--notchSize), 
      var(--notchSize) 0%, 
      calc(100% - var(--notchSize)) 0%, 
      100% var(--notchSize), 
      100% calc(100% - var(--notchSize)), 
      calc(100% - var(--notchSize)) 100%, 
      var(--notchSize) 100%, 
      0% calc(100% - var(--notchSize))
    );
}

h2 {
  color: white;
  margin: 0 0 1rem 0;
  font-family: 'Roboto', sans-serif;
}
p {
  margin: 0;
}

input {
  position: absolute;
  top: 20px;
  left: 5vw;
  width: 90vw;
}
var inp = document.querySelector("input");
var mod = document.querySelector(".module");

inp.addEventListener("input", function() {
  mod.style.setProperty("--notchSize", this.value + "px");
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/5.0.0/sanitize.css

External JavaScript

This Pen doesn't use any external JavaScript resources.