CSS-Zeichnungsfächermuster

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, trigonometrische

Funktionen.

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 erstellen

Fortschrittsbalken, 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;
}

Studenten, die nicht gut in Mathematik sind, machen Sie bitte selbst etwas Populärwissenschaft...

Eine besondere Behandlung ist erforderlich, wenn $count 1 oder 2 ist, da tan(PI ) und tan(PI / 2 ) ist ein unendlicher Wert. Wenn Sie es nicht verstehen, lesen Sie bitte das Tangensfunktionsbild:

Zugehöriger Code (wobei $diameter = 2 *). $radius ist der Durchmesser des Kreises):

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

Kopieren und drehen Sie abschließend die Sektoreinheiten nacheinander:

@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;
    }
}

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Fall in diesem Artikel Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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!