JSFiddle - React, Tailwind, and code Playground

by marcelow

HTML

<div class="logo-walla">
    <div class="inner-top1"></div>
    <div class="inner-top2"></div>
    <div class="inner-bottom1"></div>
</div>

CSS

.logo-walla {
    background-color:#171516;
    width:300px;
    height:300px;
    border-radius:150px;
    position:relative;
    overflow:hidden;
}

.inner-top1 {
    border-radius: 10px;
    border-bottom-right-radius: 0;
    background-color:#ffffff;
    height: 25%;
    width: 30%;
    -webkit-transform: skew(-15deg);
    position:absolute;
    top:11%;
    left:37%;
}

.inner-top2 {
    width: 12%;
    height: 0;
    border-top: 87px solid #ffffff;
    border-left: 51px solid transparent;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 10px;
    -webkit-transform: skew(-7deg);
    position: absolute;
    top: 35%;
left: 34%;
}

.inner-bottom1 {
    border-radius: 10px;
    background-color:#ffffff;
    height: 19%;
    width: 22%;
    -webkit-transform: skew(-15deg);
    position:absolute;
    bottom:11%;
    left:38%;
}