连接圆角正方形

Question

如何创建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>

Answer 1

考虑到使用CSS对齐和制作双曲线的麻烦,这显然是SVG的工作.曲线更容易创建和控制.这是一个使用示例:

• 内联SVG
• 二次贝塞尔曲线
• 转变
• 在使用元件所以路径标签只有一个发生

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元素上的动画.

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