<div class="taiji"></div>

* {

    margin: 0;

    padding: 0;

}

​

body {

    background-color: #ccc;

}

​

.taiji {

    width: 150px;

    height: 300px;

    margin: 100px auto;

    border-right: 150px solid #000;

    background-color: #fff;

    border-radius: 150px;

    animation: rotate 2s infinite linear;

}

​

.taiji::before,

.taiji::after {

    content: '';

    margin-left: 50%;

    display: block;

    width: 50px;

    height: 50px;

    background-color: #fff;

    border: 50px solid #000;

    border-radius: 75px;

}

​

.taiji::after {

    background-color: #000;

    border: 50px solid #fff;

}

​

@keyframes rotate {

    from {}

​

    to {

        transform: rotate(-360deg);

    }

}