JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="header">
  <div class="logo">Logo</div>
  <div class="menu">Menu</div>
</div>
<div class="full">
  
</div>

SCSS

.full{
  width: 100%;
  margin: auto;
/*   max-width: 1000px; */
  height: 500px;
  background: url(https://d1fmx1rbmqrxrr.cloudfront.net/cnet/optim/i/edit/2019/04/eso1644bsmall__w770.jpg) no-repeat center / cover;
}
.header{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  max-width: 1000px;
  margin: auto;
  height: 166px;
  // background: red;
  display: flex;
  &:before{
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    height: 125px;
    background: rgba(0,255,0,.75);
    width: calc(((100vw - 100%) / 2 ) - 10px);
  }
}
.logo{
  z-index: 0;
  position: relative;
  width: 25%;
  // background: yellow;
  &:before{
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-top-color: rgba(255,255,255,0.75);
    border-width: 166px 70px 0 100vw;
  }
}
.menu{
  z-index: 0;
  position: relative;
  width: 75%;
  // background: green;
  &:before{
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    border: 1px solid transparent;
    border-bottom-color: rgba(0,255,0,0.75);
    border-right-color: rgba(0,255,0,0.75);
    border-width: 0 0 125px 53px;
    transform: translateX(-53px);
  }
}