CSS는 다섯개 별을 그립니다_CSS/HTML

1헥사곤

코드 복사 코드는 다음과 같습니다.

#star-six {
너비: 0;
높이: 0;
테두리 왼쪽: 50px 단색 투명;
테두리 오른쪽: 50px 고체 투명;
border-bottom: 100px 단색 빨간색;
위치: 상대;
}
#star-six:after {
너비: 0;
높이: 0;
테두리- 왼쪽: 50px 단색 투명;
테두리 오른쪽: 50px 단색 투명;
테두리 상단: 100px 단색 빨간색;
위치: 절대;
내용: "";
상단: 30px;
왼쪽: -50px;
}

펜타클 2개

코드 복사 코드는 다음과 같습니다.

#star-five {
여백: 50px 0;
위치: 상대;
디스플레이: 블록;
색상: 빨간색;
너비: 0px;
높이: 0px;
테두리 오른쪽: 100px 단색 투명;
테두리 하단: 70px 단색 빨간색;
테두리 왼쪽: 100px 고체 투명;
-moz-transform: 회전(35deg );
-webkit-transform: 회전(35deg);
-ms-transform: 회전(35deg);
-o-transform: 회전(35deg);
}
#star -five :이전 {
테두리 하단: 80px 단색 빨간색;
테두리 왼쪽: 30px 단색 투명;
테두리 오른쪽: 30px 단색 투명;
위치: 절대;
높이: 0;
너비: 0;
위쪽: -45px;
왼쪽: -65px;
디스플레이: 블록;
콘텐츠: '';
-webkit-transform: 회전( -35도);
-moz-transform: 회전(-35deg);
-ms-transform: 회전(-35deg);
-o-transform: 회전(-35deg);

}
#star-five:after {
위치: 절대;
디스플레이: 블록;
색상: 빨간색;
위쪽: 3px;
왼쪽: -105px;
너비: 0px;
높이: 0px;
테두리 오른쪽: 100px 단색 투명;
테두리 하단: 70px 단색 빨간색;
테두리 왼쪽: 100px 고체 투명;
- webkit- 변환: 회전(-70deg);
-moz-transform: 회전(-70deg);
-ms-transform: 회전(-70deg);
-o-transform: 회전(-70deg) );
내용: '';
}

3펜타곤

코드 복사 코드는 다음과 같습니다.

#pentagon {
위치: 상대;
너비: 54px;
테두리 너비: 50px 18px 0;
테두리 스타일: 단색;
테두리- 색상 : 빨간색 투명;
}
#pentagon:전 {
내용: "";
위치: 절대;
높이: 0;
너비: 0;
상단 : -85px;
왼쪽: -18px;
테두리 너비: 0 45px 35px;
테두리 스타일: 단색;
테두리 색상: 투명 투명 빨간색;
}

4육각형

复主代码 代码如下:

#육각형 {
    너비: 100px;
    높이: 55px;
    배경: 빨간색;
    위치: 상대;
}
#헥사곤:전 {
    콘텐츠: "";
    위치: 절대;
    상단: -25px;
    왼쪽: 0;
    너비: 0;
    높이: 0;
    테두리 왼쪽: 50px 솔리드 투명;
    테두리 오른쪽: 50px 솔리드 투명;
    테두리 하단: 25px 솔리드 레드;
}
#hexagon:after {
    content: "";
    위치: 절대;
    하단: -25px;
    왼쪽: 0;
    너비: 0;
    높이: 0;
    테두리 왼쪽: 50px 단색 투명;
    테두리 오른쪽: 50px 단색 투명;
    테두리 상단: 25px 단색 빨간색;
}

5 多边형

复主代码 代码如下:

#octagon {
    너비: 100px;
    높이: 100px;
    배경: 빨간색;
    위치: 상대;
}

#octagon:before {
    콘텐츠: "";
    위치: 절대;
    상단: 0;
    왼쪽: 0;
    테두리-하단: 29픽셀 단색 빨간색;
    테두리 왼쪽: 29픽셀 솔리드 #eee;
    경계 오른쪽: 29px 단색 #eee;
    너비: 42px;
    높이: 0;
}

#octagon:after {
    content: " ";
    위치: 절대;
    하단: 0;
    왼쪽: 0;
    border-top: 29px 단색 빨간색;
    border-left: 29px solid #eee;
    border -오른쪽: 29px 단색 #eee;
    너비: 42px;
    높이: 0;
}

6심형

复主代码 代码如下:

#heart {
    위치: 상대;
    너비: 100px;
    높이: 90px;
}
#heart:전,
#heart:후 {
    위치: 절대;
    내용: "";
    왼쪽: 50px;
    위쪽: 0;
    너비: 50px;
    높이: 80px;
    배경: 빨간색;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: 회전(-45deg);
       -moz-transform: 회전 (-45deg);
        -ms-transform: 회전(-45deg);
         -o-transform: 회전(-45deg);
            변환: 회전(-45deg);
    -webkit- 변환 원본: 0 100%;
       -moz-변형-원점: 0 100%;
        -ms-변형-원점: 0 100%;
        -o-변형-원점: 0 100%;
            변형 원본: 0 100%;
}
#heart:after {
    왼쪽: 0;
    -webkit-transform: 회전(45deg);
       -moz-transform : 회전(45deg);
        -ms-transform: 회전(45deg);
         -o-transform: 회전(45deg);
            변환: 회전(45deg);
    -webkit-transform- 출처: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100 %;
            변환 원본 :100% 100%;
}