Dieses Mal bringe ich Ihnen CSS zum Zeichnen eines Fächermusters zum Zeichnen eines Fächermusters mit CSS. Hier ist ein praktischer Fall, schauen wir uns das an.
Das Lesen dieses Artikels erfordert grundlegende mathematische Kenntnisse: Zentralwinkel, Bogenmaßsystem, trigonometrischeFunktionen.
Wir haben hart daran gearbeitet, die folgenden Effekte zu erzielen: Natürlich können Sie SVG annehmen ... Teilen Sie hier, wie Sie einen Ring mit reinem CSS erstellenFortschrittsbalken, nur drei Schritte!
Bei diesem Artikel handelt es sich um einen 2 + 1 Sandwichkeks, der blaugrüne Teil ist Marmelade. Es ist offensichtlich, dass der Keks aus zwei runden P's besteht. Konzentrieren wir uns auf die Demonstration, wie man Marmelade macht: Wie im Bild gezeigt, besteht die große Fächerform aus 6 kleine Fächer, jede kleine Fächerform macht 1/15 des gesamten runden Kuchens aus und die große Fächerform macht 6/15 des gesamten runden Kuchens aus. Wir müssen nur eine Sektoreinheit konstruieren, sie in 6 Kopien kopieren, sie in entsprechenden Winkeln drehen und sie miteinander verbinden. Wie konstruiere ich eine Fächerform? Verwenden Sie Dreiecke zum Verkleiden... Wie berechnet man die Breite und Höhe eines Dreiecks? Angenommen, der Kreisradius $radius beträgt 100 Pixel und der Bruch $count beträgt 15. Dann beträgt der Mittelpunktswinkel des kleinen Sektors 360 Grad / 15, die Höhe des Dreiecks beträgt 100 Pixel und die Breite beträgt 2 * 100 Pixel * tan (360 Grad / 15 / 2). Darunter wird 360 Grad / 15 / 2 in Bogenmaß als PI / 15 umgewandelt (PI == 360 Grad / 2).span { width: 0; height: 0; border: $radius solid transparent; $borderWidth: tan(pi() / $count) * $radius; border-left-width: $borderWidth; border-right-width: $borderWidth; }
span { @if $count == 1 { width: $diameter; height: $diameter; } @else if $count == 2 { width: $diameter; height: $radius; } @else { width: 0; height: 0; border: $radius solid transparent; $borderWidth: tan(pi() / $count) * $radius; border-left-width: $borderWidth; border-right-width: $borderWidth; } }
@for $index from 0 to $count { span:nth-child(#{$index + 1}) { $transform: translate(-50%, 0) rotate(360deg / $count / 2 + 360deg * $index / $count); $origin: if($count == 2, bottom, center); -webkit-transform: $transform; transform: $transform; -webkit-transform-origin: $origin; transform-origin: $origin; } }
So verwenden Sie einen linearen Farbverlauf in CSS3
Hover-Maske blinkt in CSS-Frage
Das obige ist der detaillierte Inhalt vonCSS-Zeichnungsfächermuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!