html :

<div class="main">

<div class="xin2">

</div>

<div class="xin3">

</div>

<div class="zhen">

</div>

</div>

css :

.xin2{

      width: 100px;

    height: 100px;

    border:1px solid rgb(160, 201, 136);

    background-color: rgb(160, 201, 136);

    margin:300px 0px 0px 300px;

    border-radius:50%;

    float:left;

}

.xin3{

  width: 100px;

    height: 100px;

    border:1px solid rgb(214, 134, 134);

    background-color: rgb(214, 134, 134);

    margin:250px 0px 0px 0px;

    border-radius:100%;

    float:left;

    position: relative;

    right: 50px;

}

.zhen{

    width: 100px;

    height: 100px;

    border:1px solid rgb(189, 166, 226);

    background-color: rgb(189, 166, 226);

    margin: 300px 0px 0px 0px;

    float: left;

    position: relative;

    right: 152px;

}

.main{

    transform: rotate(45deg);

}