Centering Hexagon

Hallo, Ich habe dieses Hexagon CSS-Stil aus dem Internet, und ich kann nicht die Hexagone zu zentrieren, ohne einen Sprung nach oben oder unten finden ...Centering Hexagon

Ich brauche es nur zentrierte zu bekommen, aber es nicht finden kann. .. ich suchte im Internet und fand Stil ein anderes Sechseck, aber es hat keine Bilder hatte es also ich nicht ...

Dies ist, was ich bisher

bekam https://jsfiddle.net/de3jzdd8/

nutzen könnten

body{ 
 
    font-family: 'Open Sans', arial, sans-serif; 
 
    background:hsla(195,29%,97%,1.00); 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display:block; 
 

 
} 
 
*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#categories{ 
 
    overflow:hidden; 
 
    width:90%; 
 
    margin:0 auto; 
 
} 
 
.clr:after{ 
 
    content:""; 
 
    display:block; 
 
    clear:both; 
 
} 
 
#categories li{ 
 
    position:relative; 
 
    list-style-type:none; 
 
    width:27.85714285714286%; /* = (100-2.5)/3.5 */ 
 
    padding-bottom: 32.16760145166612%; /* = width /0.866 */ 
 
    float:left; 
 
    overflow:hidden; 
 
    visibility:hidden; 
 
    
 
    -webkit-transform: rotate(-60deg) skewY(30deg); 
 
    -ms-transform: rotate(-60deg) skewY(30deg); 
 
    transform: rotate(-60deg) skewY(30deg); 
 
} 
 
#categories li:nth-child(3n+2){ 
 
    margin:0 1%; 
 
} 
 
#categories li:nth-child(6n+4){ 
 
    margin-left:0.5%; 
 
} 
 
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) { 
 
\t margin-top: -6.9285714285%; 
 
    margin-bottom: -6.9285714285%; 
 
    
 
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); 
 
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); 
 
    transform: translateX(50%) rotate(-60deg) skewY(30deg); 
 
} 
 
#categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{ 
 
    margin-bottom:0%; 
 
} 
 
#categories li *{ 
 
    position:absolute; 
 
    visibility:visible; 
 
} 
 
#categories li > div{ 
 
    width:100%; 
 
    height:100%; 
 
    text-align:center; 
 
    color:#fff; 
 
    overflow:hidden; 
 
    
 
    -webkit-transform: skewY(-30deg) rotate(60deg); 
 
    -ms-transform: skewY(-30deg) rotate(60deg); 
 
    transform: skewY(-30deg) rotate(60deg); 
 
    
 
\t -webkit-backface-visibility:hidden; 
 
    
 
} 
 

 
/* HEX CONTENT */ 
 
#categories li img{ 
 
    left:-100%; right:-100%; 
 
    width: auto; height:100%; 
 
    margin:0 auto; 
 
} 
 

 
#categories div h1, #categories div p{ 
 
    width:90%; 
 
    padding:0 5%; 
 
    background-color:hsla(195,29%,97%,1.00); background-color: hsla(0,0%,42%,0.80); 
 
    font-family: 'Raleway', sans-serif; 
 
    
 
    -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; 
 
    -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; 
 
    transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; 
 
} 
 
#categories li h1{ 
 
    bottom:110%; 
 
    font-style:italic; 
 
    font-weight:normal; 
 
    font-size:1.5em; 
 
    padding-top:100%; 
 
    padding-bottom:100%; 
 
} 
 
#categories li h1:after{ 
 
\t content:''; 
 
    display:block; 
 
    position:absolute; 
 
    bottom:-1px; left:45%; 
 
    width:10%; 
 
    text-align:center; 
 
    z-index:1; 
 
    border-bottom:2px solid #fff; 
 
} 
 
#categories li p{ 
 
\t padding-top:50%; 
 
\t top:110%; 
 
\t padding-bottom:50%; 
 
} 
 

 

 
/* HOVER EFFECT */ 
 

 
#categories li div:hover h1 { 
 
    bottom:50%; 
 
    padding-bottom:10%; 
 
} 
 

 
#categories li div:hover p{ 
 
    top:50%; 
 
    padding-top:10%; 
 
} 
 
#fork{ 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    color:#000; 
 
    text-decoration:none; 
 
    border:1px solid #000; 
 
    padding:.5em .7em; 
 
    margin:1%; 
 
    transition: color .5s; 
 
    overflow:hidden; 
 
} 
 
#fork:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 130%; height: 100%; 
 
    background: #000; 
 
    z-index: -1; 
 
    transform-origin:0 0 ; 
 
    transform:translateX(-100%) skewX(-45deg); 
 
    transition: transform .5s; 
 
} 
 
#fork:hover { 
 
    color: #fff; 
 
} 
 
#fork:hover:before { 
 
    transform: translateX(0) skewX(-45deg); 
 
}

<ul id="categories" class="clr"> 
 
    <li> 
 
    <div> 
 
     <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li><li> 
 
     <div> 
 
     <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    </ul>

Quelle

2016-06-01 iReactionz

Sie können die #categories Ul.

body{ 
 
    font-family: 'Open Sans', arial, sans-serif; 
 
    background:hsla(195,29%,97%,1.00); 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display:block; 
 

 
} 
 
*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#categories{ 
 
    overflow:hidden; 
 
    width:90%; 
 
    margin:0 auto; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    position: relative; 
 
} 
 
.clr:after{ 
 
    content:""; 
 
    display:block; 
 
    clear:both; 
 
} 
 
#categories li{ 
 
    position:relative; 
 
    list-style-type:none; 
 
    width:27.85714285714286%; /* = (100-2.5)/3.5 */ 
 
    padding-bottom: 32.16760145166612%; /* = width /0.866 */ 
 
    float:left; 
 
    overflow:hidden; 
 
    visibility:hidden; 
 
    
 
    -webkit-transform: rotate(-60deg) skewY(30deg); 
 
    -ms-transform: rotate(-60deg) skewY(30deg); 
 
    transform: rotate(-60deg) skewY(30deg); 
 
} 
 
#categories li:nth-child(3n+2){ 
 
    margin:0 1%; 
 
} 
 
#categories li:nth-child(6n+4){ 
 
    margin-left:0.5%; 
 
} 
 
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) { 
 
\t margin-top: -6.9285714285%; 
 
    margin-bottom: -6.9285714285%; 
 
    
 
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); 
 
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); 
 
    transform: translateX(50%) rotate(-60deg) skewY(30deg); 
 
} 
 
#categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{ 
 
    margin-bottom:0%; 
 
} 
 
#categories li *{ 
 
    position:absolute; 
 
    visibility:visible; 
 
} 
 
#categories li > div{ 
 
    width:100%; 
 
    height:100%; 
 
    text-align:center; 
 
    color:#fff; 
 
    overflow:hidden; 
 
    
 
    -webkit-transform: skewY(-30deg) rotate(60deg); 
 
    -ms-transform: skewY(-30deg) rotate(60deg); 
 
    transform: skewY(-30deg) rotate(60deg); 
 
    
 
\t -webkit-backface-visibility:hidden; 
 
    
 
} 
 

 
/* HEX CONTENT */ 
 
#categories li img{ 
 
    left:-100%; right:-100%; 
 
    width: auto; height:100%; 
 
    margin:0 auto; 
 
} 
 

 
#categories div h1, #categories div p{ 
 
    width:90%; 
 
    padding:0 5%; 
 
    background-color:hsla(195,29%,97%,1.00); background-color: hsla(0,0%,42%,0.80); 
 
    font-family: 'Raleway', sans-serif; 
 
    
 
    -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; 
 
    -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; 
 
    transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; 
 
} 
 
#categories li h1{ 
 
    bottom:110%; 
 
    font-style:italic; 
 
    font-weight:normal; 
 
    font-size:1.5em; 
 
    padding-top:100%; 
 
    padding-bottom:100%; 
 
} 
 
#categories li h1:after{ 
 
\t content:''; 
 
    display:block; 
 
    position:absolute; 
 
    bottom:-1px; left:45%; 
 
    width:10%; 
 
    text-align:center; 
 
    z-index:1; 
 
    border-bottom:2px solid #fff; 
 
} 
 
#categories li p{ 
 
\t padding-top:50%; 
 
\t top:110%; 
 
\t padding-bottom:50%; 
 
} 
 

 

 
/* HOVER EFFECT */ 
 

 
#categories li div:hover h1 { 
 
    bottom:50%; 
 
    padding-bottom:10%; 
 
} 
 

 
#categories li div:hover p{ 
 
    top:50%; 
 
    padding-top:10%; 
 
} 
 
#fork{ 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    color:#000; 
 
    text-decoration:none; 
 
    border:1px solid #000; 
 
    padding:.5em .7em; 
 
    margin:1%; 
 
    transition: color .5s; 
 
    overflow:hidden; 
 
} 
 
#fork:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 130%; height: 100%; 
 
    background: #000; 
 
    z-index: -1; 
 
    transform-origin:0 0 ; 
 
    transform:translateX(-100%) skewX(-45deg); 
 
    transition: transform .5s; 
 
} 
 
#fork:hover { 
 
    color: #fff; 
 
} 
 
#fork:hover:before { 
 
    transform: translateX(0) skewX(-45deg); 
 
}

<ul id="categories" class="clr"> 
 
    <li> 
 
    <div> 
 
     <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li><li> 
 
     <div> 
 
     <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt=""/> 
 
     <h1>This is a title</h1> 
 
     <p>Some sample text about the article this hexagon leads to</p> 
 
    </div> 
 
    </li> 
 
    </ul>

Quelle

2016-06-01 10:39:26

Centering Hexagon

Antwort

Verwandte Themen