首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >连接圆角正方形

连接圆角正方形
EN

Stack Overflow用户
提问于 2016-10-06 19:22:00
回答 2查看 1.1K关注 0票数 17

如何创建div徽标,如下图所示:

这是我在JsFiddle中创建的内容

主要的问题是我如何连接两个盒子的形状如下图,谁能建议吗?

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

EN

回答 2

Stack Overflow用户

发布于 2016-10-06 19:51:00

通过在CSS中添加一些伪元素,我成功地创建了您正在寻找的设计。我的时间有点紧,所以这篇文章有点粗糙,但希望它能有所帮助:

代码语言:javascript
复制
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);
}
代码语言:javascript
复制
<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>

票数 8
EN

Stack Overflow用户

发布于 2016-10-06 21:07:52

这是一个模棱两可的答案。不知道你是否可以使模糊不那么半透明,但这是我所能做到的。

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39894660

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档