CSS3로 반복되는 육각형 패턴 생성

CSS3로 반복되는 육각형 패턴 생성

---

그래서 CSS를 사용하여 반복되는 육각형 패턴을 만들어야합니다. 이미지가 필요하면 거기로 갈 수 있지만 가능하면 CSS 만 사용하는 것이 좋습니다.

다음은 내가 만들려는 아이디어입니다.

기본적으로 육각형 모양을 만든 다음 그 위에 텍스트 / 이미지를 오버레이하는 방법이 필요합니다. 아직 코드가 많지 않습니다. 어디서부터 시작해야할지 모르겠습니다. 문제는 <div>( http://css-tricks.com/examples/ShapesOfCSS/ ) 와 같이 육각형 모양으로 s를 사용할 수 있지만 연결되지 않는다는 것입니다. 반복되는 육각형 패턴을 사용할 수 있지만 특정 모양에 필요한 텍스트 또는 이미지의 정확한 위치를 지정할 수 없습니다. 미리 도움을 주셔서 감사합니다.

---

(비록 아나의 대답은 아마도 "에서 생각"에 도심 그녀가 단일 사용하는 방법을 마련 할 수 있다는 사실 광산을 사용하여, 내 후 개월 만에 온 div, 그래서 가치가 추진하고을 너무 그녀의 대답을 체크 아웃 - 그러나 16 진수의 내용은 더 제한적입니다.)

정말 놀라운 질문이었습니다. 물어봐 주셔서 감사합니다. 좋은 점은 다음과 같은 사실입니다.

이 바이올린은 당신이 할 수 있다는 것을 증명합니다!

원래 바이올린을 사용 (바이올린 위의 링크에 나중에 편집 수정) -이 imgur.com 로딩 매우 신뢰할 수있는 보이는되지 않은 이미지, 새로운 바이올린이 사용되도록 photobucket.com 활용 ( 지속성이 있는지 알려주세요 이미지 로딩 문제 ). 설명 코드는 아래의 (에 약간의 차이가 있음으로 간다 때문에 나는 원래 링크를 유지 한 background-size또는 position새로운 바이올린으로는).

아이디어는 귀하의 질문을 읽은 직후에 나에게 왔지만 구현하는 데 시간이 걸렸습니다. 원래는 하나의 div가상 요소 가있는 단일 "hex"를 얻으려고 시도했지만 , 내가 알 수 있듯이 background-image(필요한) 회전 만 할 수있는 방법이 없었기 때문에 div올바른 요소를 얻기 위해 몇 가지 추가 요소를 추가 해야했습니다. / 헥스의 왼쪽, 그래서 background-image회전 수단으로 의사 요소를 사용할 수 있습니다 .

IE9, FF 및 Chrome에서 테스트했습니다. 이론적으로 CSS3를 지원하는 모든 브라우저 transform에서 작동해야합니다.

첫 번째 메인 업데이트 (설명 추가)

이제 코드 설명을 게시 할 시간이 있습니다.

첫째, 육각형은 30/60도 관계와 삼각법으로 정의되므로 관련된 주요 각도가됩니다. 둘째, 우리는 16 진수 격자가 상주 할 "행"으로 시작합니다. HTML은 다음과 같이 정의됩니다 (추가 div요소는 16 진수를 만드는 데 도움이됩니다).

<div class="hexrow">
    <div>
        <span>First Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Second Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Third Hex Text</span>
        <div></div>
        <div></div>
    </div>
</div>

inline-block육각형 에 사용할 display것이지만 우연히 다음 선으로 래핑되어 그리드가 망가지는 것을 원하지 white-space: nowrap않으므로이 문제를 해결합니다. margin이 행에는 16 진수의 사이에 원하는 공간의 양에 따라 달라집니다 것입니다, 일부 실험은 당신이 원하는 것을 얻기 위해 필요할 수 있습니다.

.hexrow {
    white-space: nowrap;
    /*right/left margin set at (( width of child div x sin(30) ) / 2) 
    makes a fairly tight fit; 
    a 3px bottom seems to match*/
    margin: 0 25px 3px;
}

의 직계 자식 사용 .hexrow만하는 div요소를 우리는 육각 모양의 기초를 형성한다. (가) width헥사 위쪽의 수평 구동 것이라고는 height모든면이 정육각형의 길이가 동일하기 때문에 그 수로부터 도출된다. 다시 말하지만 여백은 간격에 따라 달라 지지만 그리드 모양을 만들기 위해 개별 육각형의 "겹침"이 발생하는 곳입니다. 는 background-image바로 여기, 한 번 정의된다. 왼쪽으로 이동하는 것은 적어도 16 진수의 왼쪽에 추가 된 너비를 수용하는 것입니다. 중앙에있는 텍스트를 원한다고 가정하면는 text-align수평 (물론)을 처리하지만 line-height일치하는 텍스트 는 수직 중앙에 배치 height할 수 있습니다.

.hexrow > div {
    width: 100px;
    height: 173.2px; /* ( width x cos(30) ) x 2 */
    /* For margin:
    right/left = ( width x sin(30) ) makes no overlap
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
    margin: 0 25px;
    position: relative;
    background-image: url(http://i.imgur.com/w5tV4.jpg);
    background-position: -50px 0; /* -left position -1 x width x sin(30) */
    background-repeat: no-repeat;
    color: #ffffff;
    text-align: center;
    line-height: 173.2px; /*equals height*/
    display: inline-block;
}

각 홀수 16 진수는 "행"과 관련하여 아래로 이동하고 각 짝수는 위로 이동합니다. 시프트 계산 (width x cos (30) / 2)도 (height / 4)와 동일합니다.

.hexrow > div:nth-child(odd) {
    top: 43.3px; /* ( width x cos(30) / 2 ) */
}

.hexrow > div:nth-child(even) {
    top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}

우리는 2 개의 자식 div요소를 사용하여 16 진수의 "날개"를 만듭니다. 기본 육각 사각형과 같은 크기를 지정한 다음 회전하고 기본 육각형 "아래"로 밉니다. Background-image"날개"의 이미지가 주 사각형의 이미지와 "일치"될 것이기 때문에 이미지가 동일하도록 상속됩니다 (물론). 가상 요소는 이미지를 생성하는 데 사용됩니다. 이미지를 다시 수평으로 "재 회전"해야하기 때문입니다 ( div"날개"를 만들기 위해 부모 를 회전했기 때문에 ).

:before제의 네거티브 량의 폭은 육각의 주요부 플러스 메인 헥스 원본 배경 시프트 동일의 배경을 해석한다. :before제의 번역은 원점 변경되고, X 축 상에 메인 폭 이동하며, Y 축에 절반 높이.

.hexrow > div > div:first-of-type {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(60deg); /* IE 9 */
    -moz-transform:rotate(60deg); /* Firefox */
    -webkit-transform:rotate(60deg); /* Safari and Chrome */
    -o-transform:rotate(60deg); /* Opera */
    transform:rotate(60deg);
}

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    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;
}

.hexrow > div > div:last-of-type {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(-60deg); /* IE 9 */
    -moz-transform:rotate(-60deg); /* Firefox */
    -webkit-transform:rotate(-60deg); /* Safari and Chrome */
    -o-transform:rotate(-60deg); /* Opera */
    transform:rotate(-60deg);
}

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

    /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
    -ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */
    -moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */
    -webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */
    -o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */
    transform:rotate(60deg) translate(100px, 86.6px);

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

여기에 span텍스트가 있습니다. 은 line-height텍스트의 라인이 정상 만들 리셋하지만 vertical-align: middle이후 작품은 line-height부모에 큰했다. 는 white-space다시 포장 할 수 있도록 재설정됩니다. 왼쪽 / 오른쪽 여백을 음수로 설정하면 텍스트가 16 진수의 "날개"로 들어갈 수 있습니다.

.hexrow > div > span {
    display: inline-block;
    margin: 0 -30px;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal;
}

해당 행의 개별 대상 행과 셀을 이미지, span텍스트 설정 또는 불투명도 를 변경하거나 더 큰 이미지를 수용 (원하는 위치로 이동)하는 등의 작업을 수행 할 수 있습니다. 이것이 두 번째 행에 대해 수행하는 작업입니다.

.hexrow:nth-child(2) > div:nth-child(1) {
    background-image: url(http://i.imgur.com/7Un8Y.jpg);
}

.hexrow:nth-child(2) > div:nth-child(1) > span {
    /*change some other settings*/
    margin: 0 -20px;
    color: black;
    font-size: .8em;
    font-weight: bold;
}

.hexrow:nth-child(2) > div:nth-child(2) {
    background-image: url(http://i.imgur.com/jeSPg.jpg);
}

.hexrow:nth-child(2) > div:nth-child(3) {
    background-image: url(http://i.imgur.com/Jwmxm.jpg);
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -150px -120px;
    opacity: .3;
    color: black;
}

.hexrow:nth-child(2) > div:nth-child(3) > div:before {
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -100px -120px; /* the left shift is always less in the pseudo elements by the amount of the base shift */
}

.hexrow:nth-child(2) > div:nth-child(4) {
    background-image: url(http://i.imgur.com/90EkV.jpg);
    background-position: -350px -120px;
}

.hexrow:nth-child(2) > div:nth-child(4) > div:before {
    background-position: -300px -120px;
}

---

실제로 육각형 당 하나의 요소와 배경 이미지 및 텍스트에 대한 의사 요소로 수행 할 수 있습니다.

데모

기본 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>

더 많은 행을 가질 수 있습니다 n. 홀수 행 에는 육각형, 짝수 행 에는 육각형 만 있으면됩니다 n+/-1.

관련 CSS :

* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 7%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 8.5%;
    padding: 16%;
    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before, .content:after {
    display: block;
    position: absolute;
    /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */ 
               skewY(-30deg) rotate(-30deg);
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.content:after { content: attr(data-content); }
/* add background images to :before pseudo-elements */
.row:nth-child(n) .hexagon:nth-child(m):before {
    background-image: 
        url(background-image-mxn.jpg); 
}

---

육각형을 만드는 방법에 대한 간단한 데모를 제공합니다.

.hex {
  width: 40px;
  height: 70px;
  margin: 20px;
  overflow: hidden;
}

.hex:before {
  content: "";
  transform: rotate(45deg);
  background: #f00;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px -5px 10px -5px;
}

<div class="hex">
</div>

---

다음은 육각형 크기와 레이아웃을 쉽게 설정할 수있는 COMPASS / SCSS를 사용하는 또 다른 방법입니다.

http://codepen.io/interdruper/pen/GrBEk

---

if you are able to implement the div shapes trick, then simply give each div a position:relative (you would have to initially position them all one by one at first, by also setting top and left)

---

You can create a fully responsive hexagonal grid using only CSS. The idea is to create a parent shape as a mask using CSS2.1 overflow:hidden which is compatible with almost all browsers, even internet explorer 6.

It is a surprisingly simple technique that can be used for creating a responsive grid of all kinds of shapes, it just requires thinking outside of the box to solve the problem.

I have an extensive step by step guide on how to do this technique here: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids

This is the best way I have found so far, requires no javascript and is both fluid and responsive.

I also used the technique in a free HTML template that includes images inside the hexagons which you can demo and download here: https://www.codesmite.com/freebie/hexa-free-responsive-portfolio-template

---

AFAIK, there is no way of doing in in pure CSS. Your best bet would be to use mask clipping for backgrounds as explained here: http://www.cssbakery.com/2009/06/background-image.html (this will only work if your page background is solid color or you can fit and position your mask to match page background.

Then you could use csstextwrap to fit in the text: http://www.csstextwrap.com/examples.php

그래서 비슷한 질문이 많이있었습니다. 예 : div의 텍스트를 삼각형 모양으로 채우는 방법이 있습니까?

참고 URL : https://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3