【问题标题】：Connecting rounded squares连接圆角正方形
【发布时间】：2017-02-15 02:52:54
【问题描述】：

如何创建 div 徽标，如下图所示：

这是我在JsFiddle创建的

主要问题是如何连接两个盒子，如下图所示，有人可以建议吗？

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>

【问题讨论】：

使用 SVG。它更容易且响应速度更快。
您是否考虑过使用<canvas> 元素？

标签： html css svg css-shapes

【解决方案1】：

考虑到对齐和making double curves with CSS 的麻烦，这显然是 SVG 的工作。曲线更容易创建和控制。这是一个使用示例：

内嵌 SVG
quadratic bezier curves
transform
use element 所以路径标签只出现一次

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>

带有加载动画：

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>

请注意，您需要在动画中添加供应商前缀，并且 IE/Edge 不支持 svg 元素上的动画。

【讨论】：

【解决方案2】：

通过在 CSS 中添加一些伪元素，我设法创建了您正在寻找的设计。我有点赶时间，所以边缘有点粗糙，但希望它会有所帮助：

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>

【讨论】：

【解决方案3】：

最好的选择是使用 SVG。

您可以通过图像到 SVG 转换器运行它，从而为您提供完整的 SVG，手动创建 SVG 代码或使用 Illustrator 之类的程序来实现您想要的效果。

图像到 SVG 转换

这是使用在线 SVG 转换器工具来创建代码。如您所见，它非常完整

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>

手工编码的 SVG

我只做了一半，它并不完美，但你可以看到我在做什么。它也比转换器的输出更容易阅读和理解。

<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>

【讨论】：

【解决方案4】：

这是一个半公式化的答案。不知道你是否可以让模糊变得不那么透明，但这是我所得到的。

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>

我知道你现在有了答案，但这里有另一种方法。

【讨论】：

【解决方案5】：

Logo 已经由 great developer 开发，但我对 css 做了一些小改动以减少代码并应用 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>

【讨论】：