Wie schreibe ich einen fünfzackigen Stern in CSS?

So schreiben Sie einen fünfzackigen Stern in CSS: Erstellen Sie zuerst eine HTML-Beispieldatei. Erstellen Sie dann ein Div über die kleine Namensklasse -spitziger Stern.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer.

Verwenden Sie CSS, um den fünfzackigen Stern zu realisieren.

Der große fünfzackige Stern. Erstellen Sie den div durch die Klasse mit kleinen Namen

.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);
}

Um den Effekt zu erzielen

Kleiner fünfzackiger Stern

Erstellen Sie div

.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);
}

durch die Klasse mit kleineren Namen, um den Effekt zu erzielen

Empfohlenes Lernen: „ CSS-Video-Tutorial

"

Das obige ist der detaillierte Inhalt vonWie schreibe ich einen fünfzackigen Stern in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!