17
मैं कैसे, 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>
एक एसवीजी का उपयोग करें। यह बहुत आसान और अधिक उत्तरदायी है। –
क्या आपने '