CSS에서 육각형을 구현하는 방법

CSS에서 육각형을 구현하는 방법: 1. 2개의 이등변삼각형과 직사각형을 포함하여 3개의 p를 결합합니다. 2. 3개의 직사각형을 서로 다른 각도로 회전하여 정육각형을 만듭니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS에서 육각형을 구현하는 방법은 무엇입니까?

최근에 벌집 레이아웃을 작성하다가 육각형의 구현 원리를 공부했습니다
육각형을 구현하는 두 가지 방법:
방법 1: 직사각형 1개 + 삼각형 2개
먼저 테두리를 이해해야 합니다

각 테두리는 45입니다. 이것을 사용하여 삼각형을 만들 수 있습니다

<p class="triangle"></p>/*css片段*/.triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

위의 코드는 꼭지점 각도가 120도인 이등변삼각형을 만들 수 있습니다

육각형을 만드는 방법은 3개의 p를 합하면 위쪽과 아래쪽이 120입니다. -도는 이등변삼각형이고 가운데는 직사각형입니다 (참고: border-top/border-bottom이 삼각형의 높이를 결정합니다)
육각형을 구현해 봅시다

<p class="top-triangle"></p>
<p class="center"></p>
<p class="bottom-triangle"></p>
/*css片段*/
.top-triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}
.center{
    width: 172px;
    height: 100px;
    background: red;
}
.bottom-triangle{
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

위 코드에서 정규 육각형 변형을 얻을 수 있습니다
방법 2: 세 개의 직사각형을 다른 각도로 회전하여 정육각형을 얻습니다.
요점: 오버플로: 숨김
변환 사용: 회전()

<p class="six">
    <p class="child">
        <p class="child_child"></p>
    </p></p>/*css片段*/.six,.child,.child_child{
    width: 100px;
    height: 150px;
    overflow: hidden;
}.six{    -webkit-transform: rotate(120deg);    -o-transform: rotate(120deg);    -ms-transform: rotate(120deg);    -moz-transform: rotate(120deg);
    transform: rotate(120deg);
}.child{    -webkit-transform: rotate(-60deg);    -o-transform: rotate(-60deg);    -ms-transform: rotate(-60deg);    -moz-transform: rotate(-60deg);
    transform: rotate(-60deg);
}.child_child{
    background: red;    -webkit-transform: rotate(-60deg);    -o-transform: rotate(-60deg);    -ms-transform: rotate(-60deg);    -moz-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

은 가장 안쪽에 있는 p를 추가할 수 있습니다. 배경이나 그림의 경우 색상을 추가하지 마세요. 그러나 이렇게 생성된 육각형에 텍스트를 추가할 수 있는 방법은 없습니다.

위 내용은 CSS에서 육각형을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!