连接圆角正方形
连接圆角正方形
提问于 2016-10-06 19:22:00
如何创建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>
回答 2
Stack Overflow用户
发布于 2016-10-06 19:51:00
通过在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>
Stack Overflow用户
发布于 2016-10-06 21:07:52
这是一个模棱两可的答案。不知道你是否可以使模糊不那么半透明，但这是我所能做到的。
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>
我知道你现在有答案了，但这里有另一种方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39894660
复制相关文章
相似问题
腾讯云开发者
