How to write a five-pointed star in css

How to write a five-pointed star in css: first create an HTML sample file; then create a div through the small name class; finally, set the "transform: rotate(70deg);" and other styles to realize the five-pointed star.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

Use css to realize the five-pointed star

Big five-pointed star

Create div through small name class

.small-all{
display: flex;
margin:1rem 13%;
}
.small {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    height: 0;
    margin-top: 9.375px;
    margin-bottom: 6.02679px;
    position: relative;
    width: 0;
    margin: 2rem 0.8rem;
}
.small:before,.small:after {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -15px;
    position: absolute;
    top: -9.375px;
    width: 0;
}
.small:before {
    transform: rotate(70deg);
}
.small:after {
    transform: rotate(-70deg);
}

Achieve the effect

小五角星

Create a div through the smaller name class

.smaller {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    height: 0;
    margin-right: 1.2rem;
    margin-top: 5px;
    margin-bottom: 3.21429px;
    position: relative;
    width: 0;
}
.smaller:before,.smaller:after {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    content: '';
    display: block;
    height: 0;
    left: -10px;
    position: absolute;
    top: -5px;
    width: 0;
}
.smaller:before {
    transform: rotate(70deg);
}
.smaller:after {
    transform: rotate(-70deg);
}

Achieve the effect

Recommended learning:《css video tutorial》

The above is the detailed content of How to write a five-pointed star in css. For more information, please follow other related articles on the PHP Chinese website!