CSS3만 사용하여 반복되는 육각형 패턴을 어떻게 만들 수 있나요?

CSS3을 사용하여 반복되는 육각형 패턴 생성

이것은 CSS3 변환의 기능을 강조하는 놀라운 질문입니다. 이 솔루션에는 육각형의 왼쪽 및 오른쪽 날개를 형성하는 추가 하위 div와 함께 단일 div 요소를 활용하는 것이 포함됩니다. 배경 이미지는 상속되고 의사 요소는 이미지를 회전하여 완전한 육각형의 환상을 만듭니다.

기술에 대한 분석은 다음과 같습니다.

• 다음을 사용하여 초기 육각형 구조를 정의합니다. divs:
  `
  16진수 1

  
  

  16진수 2

  
  ...
  

  `
• 사용 인라인 블록 및 크기 설정; 원하는 간격으로 여백을 조정하세요.
• 주 육각형:
  `.hexrow > div {
  너비: 100px;
  높이: 173.2px;
  ...}
  `

• "날개" 회전:
  `.hexrow > ; div > div:최초 유형 {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow > div > div:최종 유형 {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• 완전한 육각형을 만들기 위해 의사 요소를 배치합니다.
  `.hexrow > div > div:first-of-type:before {
  -ms-transform:rotate(-60deg) 번역(-150px, 0);
  -webkit-transform:rotate(-60deg) 번역(-150px, 0 );
  ...}

  `.hexrow > div > div:last-of-type:before {
  -ms-transform:rotate(60deg) 번역(100px, 86.6px);
  -webkit-transform:rotate(60deg) 번역(100px, 86.6px);
  ...`

• 범위 내의 범위에 텍스트를 추가합니다. 육각형.

이 기술을 사용하면 "hexrow" 컨테이너의 특정 요소를 타겟팅하여 육각형 내에 텍스트나 이미지를 정확하게 배치할 수 있습니다.