JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div class="hero"></div>
<div class="border">
 <div class="left-line"></div>
 <div class="right-line"></div>
</div>

CSS

.hero {
    position:relative;
    background-color:#e15915;
    height:320px !important;
    width:100% !important;
}

.border:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 150px;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 39px transparent;
    border-left: solid 50px transparent;
    border-right: solid 50px #fff;
}
.border:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 150px;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 39px transparent;
    border-left: solid 50px #fff;
    border-right: solid 50px transparent;
}
.border {
  position: relative;
  width: 100%;
  margin-top: -39px;
}

.left-line {
      float: left;
    width: calc(50% - 125px);
    background-color: #fff;
    height: 39px;
    position: absolute;
}

.right-line {
        float: left;
    width: calc(50% - 125px);
    background-color: #fff;
    height: 39px;
    position: absolute;
    right: 0;
}