Как создать логотип 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>