css로 다각형 만들기(가상요소

by

위치: 상대적; 지정된.
다음으로 부모의 보호 아래 내용을 지정하십시오. “”; 위치: 절대; for ::before and ::after는 아이들의 위치를 ​​조정하는 역할을 합니다.

오각형

바닥 몸체(오각형)를 사다리꼴로 만든 후(CSS로 직사각형 만들기 참조),
의사 요소인 ::before를 사용하여 삼각형을 만듭니다(CSS 1로 삼각형 만들기 참조).


'추천 관련글,

수업=“오각형”>

.pentagon {
    position: relative;
    width: 50px;
    height: 0;
    border-style: solid;
    border-width: 45px 20px 0;
    border-color: #ffd67a transparent;
}
    
.pentagon::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -80px;
    left: -20px;
    border-style: solid;
    border-width: 0 45px 35px 45px;
    border-color: transparent transparent #ffd67a transparent;
}

육각형

중심 몸체(육각형)를 직사각형으로 만든 후,
의사 요소 ::before 및 ::after가 서로 다른 방향으로 있는 삼각형을 만듭니다.


수업=“육각형”>

.hexagon {
    position: relative;
    width: 80px;
    height: 40px;
    background-color: #ffd67a;
}
    
.hexagon::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -25px;
    border-style: solid;
    border-width: 0 40px 25px 40px;
    border-color: transparent transparent #ffd67a transparent;
}
    
.hexagon::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 40px;
    border-style: solid;
    border-width: 25px 40px 0 40px;
    border-color: #ffd67a transparent transparent transparent;
}

팔각형

중체(팔각형)를 직사각형으로 만든 후,
::before 및 ::after 의사 요소가 서로 다른 방향으로 있는 사다리꼴을 만듭니다.


수업=“팔각형”>

.octagon {
    width: 100px;
    height: 40px;
    background: #ffd67a;
    position: relative;
}

.octagon:before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 40px;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px;
    border-color: transparent transparent #ffd67a transparent;
}

.octagon:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    width: 40px;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0;
    border-color: #ffd67a transparent;
}