색상이 지정된 테두리와 윤곽선으로 육각형을 만드는 방법은 무엇입니까?

테두리와 외곽선을 사용하여 육각형 만들기

의사 요소를 통해 테두리를 사용하여 육각형 모양을 만들 때 채우기와 외곽선에 서로 다른 색상을 직접 통합하는 것이 증명됩니다. 도전적이다. 그러나 실행 가능한 대안이 있습니다: 육각형 안에 육각형을 겹치는 것입니다.

예:

[이미지: 윤곽선이 색칠된 육각형의 예]

라이브 예시:

[라이브 육각형 예시 링크]

HTML:

<code class="html"><div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div></code>

CSS:

육각형 베이스:

<code class="css">.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}</code>

내부 육각형:

<code class="css">.hex.inner {
    background-color: blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    background-color: red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}</code>

다른 색상의 육각형을 겹쳐서 사용 , 이 접근 방식은 색상이 있는 테두리와 다른 채우기 색상을 사용하여 원하는 육각형 효과를 얻습니다.

위 내용은 색상이 지정된 테두리와 윤곽선으로 육각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!