<nav class="nav">
  <div class="container nav__container">
    <ul class="nav-list">
      <li class="nav-list__item">Lorem ipsum</li>
      <li class="nav-list__item">Sed nam</li>
      <li class="nav-list__item">Commodi</li>
      <li class="nav-list__item">Eos dolore</li>
    </ul>
    <div class="nav-contacts">
      12345678
    </div>
  </div>
</nav>

<div class="hero">
  <div class="hero__bg"></div>
  <div class="container">
    <div class="hero__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam commodi, deleniti harum eius atque aliquid facilis saepe cum consequatur non cumque! Necessitatibus numquam ut saepe recusandae autem sint ab, consectetur neque nostrum doloremque magnam distinctio quibusdam vel totam rem deleniti. Voluptate, odit nesciunt maiores quasi beatae nobis? Harum laboriosam suscipit aperiam quae magni eaque in placeat deleniti est voluptatibus dolores modi numquam fugit obcaecati deserunt distinctio ipsa perferendis ab, eveniet, vero cum? Architecto, quisquam consectetur illum rem eius officiis distinctio fugiat unde dolores, alias magni ab ratione! Quae odit iusto optio cumque a commodi saepe totam corporis fuga, ut sint?
    </div>
  </div>
</div>

:root {
  --cos: 0.9781476007338057; /* cos(12deg) */
  --sin: 0.20791169081775931; /* sin(12deg) */
  --tan: 0.2125565616700221;
  --nav-height: 64px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 15px;
}

.nav {
  position: relative;
  height: var(--nav-height);
  margin-bottom: calc(-1 * var(--nav-height));
  z-index: 100;
  overflow: hidden;
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  height: var(--nav-height);
  color: #222;
  font-size: 1.15rem;
}

.nav-list::before {
  content: '';
  position: absolute;
  right: calc(-1 * var(--nav-height) * var(--sin) - 15px);
  width: 200vw;
  height: 100%;
  background-color: rgba(255,255,255, 0.7);
  border-radius: 0 0 16px 0;
  transform: skewX(-12deg);
  transform-origin: 0% 0%;
  z-index: -1;
}

.nav-list__item {
  white-space: nowrap;
}

.nav-list__item:not(:last-child) {
  margin-right: 15px;
}

.nav-contacts {
  display: inline-flex;
  color: #fff;
  margin-left: calc(var(--nav-height) * var(--sin) + 15px);
  font-size: 2rem;
}

.hero {
  --height: 350px;
  --right: 50px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding-top: var(--nav-height);
  padding-bottom: calc(
    100% * var(--tan) -
    var(--right) * var(--sin)
  );
}

.hero__bg {
  position: absolute;
  right: var(--right);
  bottom: 0;
  width: calc(
    100% * var(--cos) + 
    var(--height) * var(--sin) -
    var(--right) * var(--cos)
  );
  height: calc(
    100% * var(--cos) +
    var(--right) * var(--sin)
  );
  transform: rotate(12deg);
  transform-origin: 100% 100%;
  border-radius: 0 0 50px 0;
  overflow: hidden;
  z-index: -1;
}

.hero__bg::before {
  content: '';
  position: absolute;
  bottom: calc(var(--right) * var(--sin));
  right: calc(-1 * var(--right) * var(--cos));
  width: calc(
    100% * 1 / var(--cos) -
    var(--height) * var(--sin) +
    var(--right) * var(--cos) + 1px
  );
  height: calc(var(--height) + 1px);
  transform: rotate(-12deg);
  transform-origin: 100% 100%;
  background:
    linear-gradient(to right, rgba(63, 81, 181, 0.35), rgba(103, 58, 183, 0.35)),
    url("https://images.unsplash.com/photo-1552933529-e359b2477252?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80") no-repeat center / cover;
}

.hero__content {
  color: #fff;
  margin-top: 25px;
  line-height: 1.45;
  margin-bottom: calc(
    50% * var(--tan) - 
    50vw * var(--tan) + 25px
  );
}

const hero = document.querySelector('.hero');
function onResize() {
  hero.style.setProperty('--height', hero.offsetHeight + 'px');
}

window.addEventListener('resize', onResize);
onResize();