JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<nav>
    <div></div>
</nav>

CSS

body {
   background: url('//placekitten.com/2000/1000') no-repeat 50% 0;
   margin: 0;
}
nav {
   height: 100px;
   overflow: hidden;
   padding-bottom: 10px;
   position: relative;
   width: 100%;
}
nav:after,
nav:before {
   bottom: 0;
   content: '';
   display: block;
   height: 0;
   position: absolute;
   width: 50%;
}
nav:after {
   border-top: 10px solid #444;
   border-left: 10px solid #444;
   border-right: 10px solid transparent;
   left: 0;
   margin-left: -20px;
}
nav:before {
   border-top: 10px solid #444;
   border-left: 10px solid transparent;
   border-right: 10px solid #444;
   margin-right: -20px;
   right: 0;
}
div {
   background: #444;
   height: 100px;
}