CSS가있는 6 각형 패턴

Question

CSS를 사용하여 6 각형 패턴을 만드는 방법에 대한 훌륭한 stackoverflow 대답을 찾았습니다. 내가 육각형에게 다른 방법으로 (즉. 그래서 요점은 상단에) 플립 싶습니다 제외하고

Generate repeating hexagonal pattern with CSS3

그것은 거의 완벽. 나는 (hexrow> div) 메인 헥스 div 너비/높이를 바꾸어서 이것을 꽤 쉽게 할 수 있었다. 그러나 나는 다른 지원 div에서 배경 이미지를 재정렬하려고 정말로 힘들다. 나는 많은 성공없이 잠시 동안 그것을 알아 내려고 노력했다.

누구나 jsFiddle을 게시하여 어떻게 완료했는지 확인할 수 있습니까? 내가 현재 어디에 있어요

이입니다 What i've tried

.. 그리고 나는이 내가 수정해야 할 것입니다 믿습니다

.hexrow > div > div:first-of-type:before { 
    content: ''; 
    position: absolute; 
    width: 200px; /* width of main + margin sizing */ 
    height: 100%; 
    background-image: inherit; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    background-size: 120% auto; 
    bottom: 0; 
    left: 0; 
    z-index: 1; 

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */ 
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */ 
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */ 
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */ 
    transform:rotate(-60deg) translate(-150px, 0); 

    -ms-transform-origin: 0 0; /* IE 9 */ 
    -webkit-transform-origin: 0 0; /* Safari and Chrome */ 
    -moz-transform-origin: 0 0; /* Firefox */ 
    -o-transform-origin: 0 0; /* Opera */ 
    transform-origin: 0 0; 
} 

어떤 도움이 많이 감사합니다.

Answer 1

:nth-of-type(odd) 및 :nth-of-type(even)을 사용하고 같은 행에 홀수/짝수 육각형에 다른 여백을 설정하십시오.

---

또는 적은 마크 업, 훨씬 간단한 방법으로 그것을 할 수 - my answer at that question을 확인하고 this demo 난 그냥했다. 아이디어는 60 degrees의 예각으로 마름모를 얻기 위해 요소에 일련의 변형을 적용한 다음 (pseudo-element 또는 child 요소에 대해 역순으로 모든 변환을 실행 취소합니다. if 요소 자체와 동일한 height을 가지고 있지만 width 중 .866 만 사용하십시오. 이는 실제로 background-image을 적용한 육각형과 평행선의 두 평행 한 변 사이의 거리 비율입니다. 따라서 배경 이미지가 하나의 요소에만 적용되기 때문에 불일치가 발생할 가능성이 없습니다.

기본 HTML 구조 :

<div class='row'> 
    <div class='hexagon'></div> 
</div> 
<div class='row'> 
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!-- 
    --><div class='hexagon content longtext' data-content='Some longer text here. 
     Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div> 
</div> 

관련 CSS : 나는 국경을 사용

.row { margin: -8% 0%; text-align: center; } 
.row:first-child { margin-top: 2.25%; } 
.hexagon { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    margin: 0 -1.5%; 
    padding: 16%; 
    transform: rotate(-30deg) skewX(30deg) scaleY(.866); /* .866 = sqrt(3)/2 */ 
} 
.hexagon:before { 
    display: block; 
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */ 
    right: 6.7%; bottom: 0; left: 6.7%; top: 0; /* 6.7% = (100% -86.6%)/2 */ 
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg); /* 1.155 = 2/sqrt(3) */ 
    background-color: rgba(30,144,255,.56); 
    background-size: cover; 
    content: ''; 
} 
.row:first-child .hexagon:first-child:before { 
    background-image: url(img.jpg); 
} 
/* and so on, add background images for all hexagons */ 

Answer 2

.

Codepen.io

<div id="hex"></div> 

그리고 여기

#hex { 
    display: inline-block; 
    position: relative; 
    width: 190px; 
    height: 220px; 
    background: no-repeat url("http://placekitten.com/200/300") 50% 50%; 
} 

div:before { 

    content: " "; 
    display: block; 
    border-top: 0px solid transparent; 
    border-bottom: 55px solid transparent; 
    order-left: 95px solid white; 
    border-right: 95px solid white; 
} 

div:after { 

    content: " "; 
    display: block; 
    border-left: 95px solid white; 
    border-top: 55px solid transparent; 
    border-right: 95px solid white; 
    margin-top:110px 
}