html - 连接圆 Angular 正方形

Question

如何创建 div Logo ，如下图所示:

这是我在 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

考虑到对齐和 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 元素上的动画。