センタリング六角

Question

こんにちは私は、インターネットからこの六角CSSスタイルを持って、私がダウンしているか、ジャンプアップすることなく、六角形の中心を見つけることができません...

私はちょうどそれが中心に取得する必要がありますが、それを見つけることができません。 ..私はこれは私が

https://jsfiddle.net/de3jzdd8/

これまでに得たものである

...インターネットを検索し、別の六角形のスタイルを見つけたが、それは私はそれを使用することができませんでしたので、それで任意の画像を持っていませんでした

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>

Answer 1

#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>