JSFiddle - React, Tailwind, and code Playground

HTML

<span class="triangle-1"></span>
<div>
    <span class="triangle-2"></span>
    <span class="logo"></span>
    <span class="triangle-3"></span>
</div>
<span class="triangle-4"></span>

CSS

body {
    background: #652f70;
    font-size: 0;
    margin: 0;
    text-align: center;
}
span {
    display: inline-block;
}
.triangle-1 {
    border-top: 40vh solid red;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}
.triangle-2 {
    border-left: 33vw solid #fff;
    border-top: 10vh solid transparent;
    border-bottom: 10vh solid transparent;
    position: absolute;
    left: 0;
}
.logo {
    background: #78bd52;
    height: 20vh;
    width: 34vw;
}
.triangle-3 {
    border-right: 33vw solid #fff;
    border-top: 10vh solid transparent;
    border-bottom: 10vh solid transparent;
    position: absolute;
    right: 0;
}
.triangle-4 {
    border-bottom: 40vh solid #fff;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}