Connecting rounded squares

Question

How do I create the div logo, as per the attached image below:

This is what I have created in JsFiddle

Main issue is how do I connect the two boxes with the shape as below image, can anybody please suggest?

body,html {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background-color: #efefef;
}
.wrapper {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -22.5px;
  margin-left: -22.5px;
}
ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 80px;
  height: 80px;
  position: relative;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul li {
  width: 2em;
  height: 2em;
  position: absolute;
  /*animation: dance 888ms infinite alternate;
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  animation: dance 888ms infinite alternate;
}
.block-1 {
  top: 0;
  left: 0;
  background: #0076aa;
  border-radius: 4px;
}
.block-2 {
  top: 0;
  right: 0;
  background: #98bd81;
  border-radius: 4px;
}
.block-3 {
  bottom: 0;
  right: 0;
  background: #98bd81;
  border-radius: 4px;
}
.block-4 {
  bottom: 0;
  left: 0;
  background: #0076aa;
  border-radius: 4px;
}

<div class='wrapper'>
  <ul class='blocks'>
    <li class='block-1'></li>
    <li class='block-2'></li>
    <li class='block-3'></li>
    <li class='block-4'></li>
  </ul>
</div>

Answer 1

Considering the hassle of aligning and making double curves with CSS, this is clearly a job for SVG. The curves are much easier to create and control. Here is an example using :

• Inline SVG
• quadratic bezier curves
• transform
• the use element so there is only one occurrence of the path tag

svg{ display:block; width:40%; margin:0 auto;}

<svg viewbox="0 0 16 15">
  <defs>
    <path id="shape" d="M7 0 H10 Q11 0 11 1 V4 Q11 5 10 5 H7 Q5 5 5 7 V9 Q5 10 4 10 H1 Q0 10 0 9 V6 Q0 5 1 5 H4 Q6 5 6 3 V1 Q6 0 7 0z" />
  </defs>
  <use xlink:href="#shape" fill="#0076AA"/>
  <use xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/>
</svg>

With a loading animation :

svg{ display:block; width:40%; margin:0 auto;}
.sq{ animation: opacity .6s infinite alternate; }
.gr{ animation-delay:-.6s;}
@keyframes opacity { to {opacity: 0;} }

<svg viewbox="0 0 16 15">
  <defs>
    <path id="shape" d="M7 0 H10 Q11 0 11 1 V4 Q11 5 10 5 H7 Q5 5 5 7 V9 Q5 10 4 10 H1 Q0 10 0 9 V6 Q0 5 1 5 H4 Q6 5 6 3 V1 Q6 0 7 0z" />
  </defs>
  <use class="sq bl" xlink:href="#shape" fill="#0076AA"/>
  <use class="sq gr" xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/>
</svg>

Note that you will need to add vendor prefixes in the animation and that animations on svg elements aren't supported by IE/Edge.

Answer 2

I managed to create the design you were looking for by adding a few pseudo-elements to your CSS. I was a bit pressed for time so it's a little rough around the edges, but hopefully it will be of some help:

body,html{
    background-color:#fff;
    height:100%;
}
.wrapper{
    height:40px;
    width:40px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-22.5px;
    margin-left:-22.5px;
}
ul{
    list-style-type:none;
    margin:0 auto;
    padding:0;
    width:82px;
    height:82px;
    position:relative;
    transform:rotate(45deg);
}
ul li{
    width:2em;
    height:2em;
    position:absolute;
    transform:rotate(-45deg);
}
.block-1{
    top:0;
    left:0;
    background:#0076aa;
    border-radius:4px;
}
.block-2{
    top:0;
    right:0;
    background:#98bd81;
    border-radius:4px;
}
.block-3{
    bottom:0;
    right:0;
    background:#98bd81;
    border-radius:4px;
}
.block-4{
    bottom:0;
    left:0;
    background:#0076aa;
    border-radius:4px;
}
.block-1::before,.block-2::before{
    background:inherit;
    content:"";
    top:calc(100% - 5px);
    left:-50%;
    height:10px;
    position:absolute;
    transform:rotate(-45deg);
    width:100%;
}
.block-3::before,.block-4::before{
    background:#fff;
    border-radius:50%;
    content:"";
    height:calc(50% + 3px);
    left:50%;
    position:absolute;
    top:calc(-50% - 3px);
    width:calc(50% + 3px);
}
.block-3::after,.block-4::after{
    background:#fff;
    border-radius:50%;
    content:"";
    height:calc(50% + 3px);
    position:absolute;
    right:calc(-50% - 3px);
    top:-3px;
    width:calc(50% + 3px);
}

<div class='wrapper'>
    <ul class='blocks'>
        <li class='block-1'></li>
        <li class='block-2'></li>
        <li class='block-3'></li>
        <li class='block-4'></li>
    </ul>
</div>