CSS를 사용하여 육각형 이미지 안에 사각형 이미지 삽입

Question

나는 6 각형 이미지와 사각형 이미지를 가지고 있습니다. 사각형 이미지를 육각형 모양의 이미지 안에 넣고 싶습니다. 이것이 CSS를 사용하여 수행 할 수 있지만, 육각형의 모양은 특별하다는 것을 알고 있습니다. 나는 여러 div를 생성하여 서로에 끼워 넣고 상대적이고 절대적인 위치를 정중하게 지정하려고 시도했지만 작동하지 않습니다. 기본적으로 이상한 모양의 이미지를 이상한 모양의 이미지 안에 삽입하는 방법은 무엇입니까? 그것은 간단한 해결책처럼 보이지만 그것을 이해할 수는 없습니다!

Answer 1

내가 먼저 시도한 것은 부모 div에 육각형 이미지를 놓고 상대 위치 또는 절대 위치로 위치를 설정 한 다음 정사각형 이미지를 육각형 이미지의 div에 중첩 된 div에 넣는 것입니다. 그런 다음 그것을 원하는 위치에 절대적으로 배치하십시오.

정상적으로 작동하지만 이미 시도한 것처럼 들립니다. 뭐하는거야?