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>

Use an SVG. It's much easier and more responsive. – Paulie_D Oct 06 '16 at 11:29 — Paulie_D, Oct 06 '16 at 11:29
Have you looked into using a ` – gaynorvader Oct 06 '16 at 12:17 — gaynorvader, Oct 06 '16 at 12:17

score 27 · Accepted Answer · edited May 23 '17 at 12:10

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.

Shaggy · Answer 2 · 2016-10-07T08:35:55.743

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>

score 4 · Answer 3 · answered Oct 06 '16 at 11:49

Your best option is to use an SVG.

You can either run it through an image to SVG converter which gives you a fully finished SVG, create the SVG code by hand or use a program like Illustrator to achieve your desired effect.

Image to SVG Convert

This is using an SVG converter tool online to create the code. As you can see its quite full

body {
  background: lightgrey;
}

<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 900 904" version="1.1">
<path fill="#0176aa" d=" M 350.14 0.00 L 546.51 0.00 C 557.90 0.78 568.99 5.90 576.59 14.48 C 583.89 22.42 588.07 33.18 587.88 43.98 C 587.88 107.98 587.88 171.99 587.88 235.99 C 588.17 249.96 580.94 263.65 569.60 271.71 C 561.12 277.92 550.43 280.52 540.01 279.83 C 487.44 278.44 434.85 271.78 382.24 276.12 C 362.32 277.82 342.25 280.95 323.63 288.51 C 310.06 294.06 297.18 302.66 289.17 315.19 C 282.70 325.19 279.87 337.18 279.77 349.00 C 279.78 413.00 279.76 477.00 279.78 541.00 C 279.91 547.26 278.86 553.57 276.37 559.33 C 269.95 574.91 253.92 585.94 237.04 586.14 C 176.69 586.22 116.34 586.15 56.00 586.17 C 47.31 586.07 38.35 586.89 30.00 583.93 C 13.22 578.53 0.73 562.25 0.00 544.61 L 0.00 346.86 C 1.21 331.57 10.80 317.30 24.66 310.68 C 30.65 307.78 37.31 306.21 43.97 306.34 C 78.64 306.38 113.32 306.11 147.98 305.13 C 176.85 303.95 205.87 302.67 234.30 297.14 C 250.18 293.88 266.27 289.25 279.60 279.68 C 289.65 272.50 297.23 262.16 301.52 250.61 C 308.30 232.56 309.35 213.05 310.12 193.97 C 310.41 178.31 310.35 162.64 309.88 146.99 C 309.15 112.31 308.05 77.64 308.19 42.95 C 308.23 32.02 312.83 21.27 320.42 13.44 C 328.11 5.34 339.00 0.56 350.14 0.00 Z"/>
<path fill="#98bd82" d=" M 631.90 331.91 C 640.05 323.06 651.95 317.87 663.99 317.91 C 728.00 317.88 792.02 317.89 856.04 317.91 C 873.26 317.68 889.87 328.70 896.45 344.60 C 898.66 349.76 899.86 355.36 899.85 360.98 C 899.86 422.00 899.86 483.02 899.86 544.03 C 899.84 552.43 900.48 561.14 897.25 569.10 C 891.45 585.30 875.35 597.26 858.09 597.69 C 841.41 597.85 824.75 596.63 808.11 595.64 C 766.00 593.26 723.59 590.29 681.55 595.31 C 662.45 597.77 643.15 601.81 626.03 610.97 C 614.00 617.36 603.35 627.05 597.60 639.56 C 593.43 648.42 591.80 658.29 591.75 668.03 C 591.77 731.04 591.73 794.04 591.76 857.05 C 591.92 862.96 591.45 868.98 589.40 874.58 C 583.95 890.84 568.25 902.80 551.17 904.00 L 351.77 904.00 C 336.62 902.43 322.55 892.77 316.15 878.88 C 312.84 872.11 311.79 864.49 311.89 857.02 C 311.92 797.01 311.90 737.00 311.90 676.99 C 311.82 668.81 311.68 660.36 314.76 652.63 C 320.59 636.73 336.31 624.97 353.29 624.28 C 404.78 623.97 456.37 624.47 507.73 620.29 C 528.90 618.29 550.27 615.67 570.40 608.50 C 584.50 603.46 597.97 595.10 606.37 582.42 C 616.43 567.35 619.46 548.95 621.06 531.25 C 623.56 498.87 621.71 466.38 621.22 433.96 C 620.48 409.99 620.21 386.00 620.20 362.01 C 619.94 350.95 624.36 339.95 631.90 331.91 Z"/>
</svg>

Hand coded SVG

Ive only half done this and its not perfect but you can see what I'm getting at. It is also much easier to read and understand than the output of the converter.

<svg height="400" viewbox="0 0 400 400">
    <path fill="blue"
          d="M145,0
             L200,0
             Q220,0 220,20
             L220,75
             Q220,95 200,95
             L185,95
             Q145,90 135,110
             L135,165
             Q135,185 115,185
             L60,185
             Q40,185 40,165
             L40,110
             Q40,90 60,90
             L75,90
             Q115,95 120,70
             L120,20
             Q120,0 140,0z" />
</svg>

score 2 · Answer 4 · answered Oct 06 '16 at 13:07

Here's a half-formulated answer. Not sure if you can make the blur less translucent but here's as far as I got.

body {
  background: #eee;
}
.filter {
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.block {
  border-radius: 4px;
  width: 2em;
  height: 2em;
  position: absolute;
  background: #fff;
}
.filter {
  height: 4em;
}
.block1 {
  -webkit-transform: translate3d(0, 2em, 0);
  transform: translate3d(0, 2em, 0);
  background: #0076aa;
}
.block2 {
  -webkit-transform: translate3d(2em, 0, 0);
  transform: translate3d(2em, 0, 0);
  background: #0076aa;
}
.block3 {
  -webkit-transform: translate3d(2em, 0, 0);
  transform: translate3d(2em, 0, 0);
  background: #98bd81;
}
.block4 {
  -webkit-transform: translate3d(4em, -2em, 0);
  transform: translate3d(4em, -2em, 0);
  background: #98bd81;
}

<div class="filter">
  <div class="block block1"></div>
  <div class="block block2"></div>
</div>
<div class="filter">
  <div class="block block3"></div>
  <div class="block block4"></div>
</div>

<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -7" result="goo" />
      <feComposite in2="goo" in="SourceGraphic" result="mix" />
    </filter>
  </defs>
</svg>

I know you have an answer now, but here's another way to do it.

A. N. SINHA · Answer 5 · 2018-06-19T22:19:56.837

Logo is already develop by great developer but i have done small changes in css to reduce the code and apply transform : skew :

body{
  background-color: #efefef;
}
ul{
  padding: 0;
  width: 150px;
  height: 150px;
  list-style-type: none;
  margin: 0 auto;
  transform: skewX(-45deg);
}
ul li{
  display: inline-block;
  height: 60px;
  width: 60px;
  margin-bottom: 15px;
  position: relative;
  transform: skewX(45deg);
}
.square{
  border-radius: 6px;
}
.bg-odd{
  background: #0076aa;
}
.bg-even{
  background: #98bd81;
  margin-left: 15px;
  right: -75px;
  top: 75px;
}
li:nth-child(1):before, 
li:nth-child(2):before{
  content: "";
  height: 15px;
  left: -60%;
  position: absolute;
  top: calc(100% - 0px);
  transform: skewY(-45deg);
  width: 100%;
}
li:nth-child(1):before{
  background: #0076aa;
}
li:nth-child(2):before{
  background: #98bd81;
}

<div class='wrapper'>
  <ul class='blocks'>
    <li class='square bg-odd'></li>
    <li class='square bg-even'></li>
    <li class='square bg-odd'></li>
    <li class='square bg-even'></li>
  </ul>
</div>

Connecting rounded squares

5 Answers5

Image to SVG Convert

Hand coded SVG