slanted-box.css

.slanted-container {
  position:relative;
}
.slanted-box {
  --slant: 20px;
  --border: 1px;
  --border-color: #4de;
  
  
  --diagonal: calc(var(--slant) * .7071067812);
  position:absolute;
  top: 0;
  height: 100%;
  border: var(--border) solid var(--border-color);
  border-right: none;
  width: calc(100% - var(--diagonal));
}
.slanted-box:before {
  content: '';
  position: absolute;
  right:calc(var(--slant) * -1);
  bottom:calc(var(--border) * -1);
  height:var(--slant);
  width:var(--slant);
  transform-origin: bottom left;
  transform: rotate(-45deg);
  border-bottom: var(--border) solid var(--border-color);
}
.slanted-box:after {
  content: '';
  position:absolute;
  right: calc(var(--diagonal) * -1);
  top: calc(var(--border) * -1);
  width: var(--diagonal);
  height: calc(100% - var(--diagonal) + var(--border));
  border: var(--border) solid var(--border-color);
  border-left: none;
  border-bottom: none;
}

.slanted-box.top:before {
  bottom:inherit;
  top:calc(var(--border) * -1);
  transform-origin: top left;
  transform: rotate(45deg);
  border-top: var(--border) solid var(--border-color);
  border-bottom: none;
}
.slanted-box.top:after {
  top: calc(var(--diagonal) - var(--border));
  border-bottom: var(--border) solid var(--border-color);
  border-top: none;
}