SOURCE

<div class="container">
    <div class="trigram qian"></div>
    <div class="trigram kun"></div>
    <div class="trigram kan"></div>
    <div class="trigram li"></div>
    <div class="taiji">
        <div class="item left"></div>
        <div class="item right"></div>
    </div>
</div>

.container {
    width: 300px;
    height: 200px;
    position: relative;
    background-color: white;
}

.trigram,
.taiji {
    position: absolute;
    left: 50%;
    top: 50%;
}

.trigram {
    width: calc(100% / 6);
    height: calc(100% / 6);
    transform: translate(-50%, -50%);
}

.qian {
    background: linear-gradient(black 25%, white 0 37.5%, black 0 62.5%, white 0 75%, black 0);
    transform: translate(-50%, -50%) rotate(123.69deg) translateY(275%);
}

.kun {
    background: 
        linear-gradient(white 0 100%) 50% 0 / calc(25% / 3) 100% repeat-y,
        linear-gradient(black 25%, white 0 37.5%, black 0 62.5%, white 0 75%, black 0);
    transform: translate(-50%, -50%) rotate(123.69deg) translateY(-275%);
}

.kan {
    background: 
        linear-gradient(white 25%, white 0 37.5%, black 0 62.5%, white 0 75%, white 0) 50% 0 / calc(25% / 3) 100% repeat-y,
        linear-gradient(black 25%, white 0 37.5%, black 0 62.5%, white 0 75%, black 0);
    transform: translate(-50%, -50%) rotate(56.31deg) translateY(-275%);
}

.li {
    background: 
        linear-gradient(black 25%, white 0 37.5%, white 0 62.5%, white 0 75%, black 0) 50% 0 / calc(25% / 3) 100% repeat-y,
        linear-gradient(black 25%, white 0 37.5%, black 0 62.5%, white 0 75%, black 0);
    transform: translate(-50%, -50%) rotate(56.31deg) translateY(275%);
}

.taiji {
    width: calc(100% / 3);
    height: 50%;
    border-radius: 50%;
    background: linear-gradient(#CD2E3A 50%, #0047A0 0);
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%) rotate(33.69deg);
}
.item {
    width: 50%;
    height: 50%;
    border-radius: 50%;  
}
.left {
    background: #CD2E3A;
}
.right {
    background: #0047A0;
}