html – 连接圆角正方形

概述如何创建div标志，如下图所示： 这是我在JsFiddle创造的 主要问题是如何连接两个形状如下图所示的两个盒子，有人可以建议吗？ body,html { width: 100%; height: 100%; margin: 0;}body { background-color: #efefef;}.wrapper { height: 40px; width: 40 如何创建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.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>

解决方法 考虑到对齐和 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  xlink:href="#shape" fill="#0076AA"/>  <use  xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/></svg>

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

总结

以上是内存溢出为你收集整理的html – 连接圆角正方形全部内容，希望文章能够帮你解决html – 连接圆角正方形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。