@charset "UTF-8";
:root {
  --width: 100vw;
  --angle: -11deg;
  /*-----------------
  Magic Number Alert:
  
  the 0.09719 is calculated by this formula:
  tan(11°) / 2
  11° is the current skewY value.
  ------------------*/
  --magic-number: 0.09719;
  --skew-padding: calc(var(--width) * var(--magic-number));
}

.diagonal-box {
  position: relative;
  padding: var(--skew-padding) 0;
  margin-top: -1px;
}
.diagonal-box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: skewy(var(--angle));
          transform: skewy(var(--angle));
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-image: linear-gradient(45deg, #10bf9d, #ff0056);
}

.content {
  max-width: 50em;
  margin: 0 auto;
  position: relative;
  color: #fff;
  border: 1px solid red;
}