Einführung in die neuen Funktionen und Methoden von CSS3 zum Zeichnen gängiger Grafiken

Vorwort: Ich habe vor, vor kurzem meine eigene Webseite zu erstellen, Navigation Ich habe vor, sie als Rechteck zu gestalten, und es werden auch Rechtecke im Hover-Stil angezeigt, einschließlich einiger Avatare , usw. Abgesehen vom Zeichnen von Kreisen habe ich noch nie ernsthaft andere Formen gezeichnet. Heute werde ich ein paar gängige Formen zeichnen, die wir sehen.

Zuvor müssen wir verstehen, was ein Pseudoelement ist (im Gegensatz dazu gibt es ein anderes Konzept namens Pseudoklasse , die beiden sind leicht zu verwechseln), ohne das keine Grafiken gezeichnet werden können . .

a) Pseudoelemente: werden zum Einfügen zusätzlicher Elemente vor und nach Inhaltselementen verwendet. Der Grund, warum sie Pseudoelemente genannt werden, besteht darin, dass sie im Dokument überhaupt nicht generiert werden und beispielsweise nur von außen sichtbar sind : Wenn Sie F12 drücken, können Sie es im Codefeld rechts sehen?

Die beiden hier verwendeten Pseudoelemente ①Vor dem Element:before ②Nach dem Element:after

1) Kreis, kein If Wenn nötig, schauen wir uns das Dreieck an

/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */<p class="sanjiao"></p>

2) Zylinder

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
    }
.yuanzhu:before {
				　　　　position: absolute;
				　　　　top: -10px;
				　　　　content: "";
				　　　　width: 50px;
				　　　　height: 20px;
				　　　　border-radius: 50%;
				　　　　background: #A8A8A8;
				　　　　z-index: 99
			　　}
.yuanzhu:after {
				　　　　position: absolute;
				　　　　bottom: -10px;
				　　　　content: "";
				　　　　width: 50px;
				　　　　height: 20px;
				　　　　border-radius: 50%;
				　　　　background: #5E5E5E;
				　　　　z-index: 9
			　　}

/* HTML */
<div class="yuanzhu"></div>

3) Pentagramm

Um einen fünfzackigen Stern zu zeichnen, müssen wir zunächst wissen, dass „deg“ in den Stilen, gefolgt von mehreren privaten Präfixen im Browser, den Drehwinkel darstellt. Beispielsweise stellt „45deg“ eine Drehung um 45 Grad im Uhrzeigersinn dar negativ bedeutet gegen den Uhrzeigersinn.

drehen ist eines der -Attribute von transformieren, das eine zweidimensionale Drehung darstellt. Es hat auch drei -dimensionale Rotation, Transformation hat auch mehrere andere Funktionen. Bei richtiger Anwendung sind die erzeugten Spezialeffekte ziemlich hoch

/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
　　　　　-ms-transform: rotate(35deg);/* IE 9 */
　　　　　-o-transform: rotate(35deg); /* Opera */
　　}
　　.wujiaox:after {
				　　　　　　content: "";
				　　　　　　width: 0px;
				　　　　　　height: 0px;
				　　　　　　display: block;
				　　　　　　border-right: 100px solid transparent;
				　　　　　　border-bottom: 70px solid #5E5E5E;
				　　　　　　border-left: 100px solid transparent;
				　　　　　　position: absolute;
				　　　　　　top: 3px;
				　　　　　　left: -105px;
				　　　　　　-webkit-transform: rotate(-70deg);
				　　　　　　-moz-transform: rotate(-70deg);
				　　　　　　-ms-transform: rotate(-70deg);
				　　　　　　-o-transform: rotate(-70deg);
			　　　}

　　.wujiaox:before {
				　　　　　　content: "";
				　　　　　　width: 0;
				　　　　　　height: 0;
				　　　　　　border-bottom: 80px solid #5E5E5E;
				　　　　　　border-left: 30px solid transparent;
				　　　　　　border-right: 30px solid transparent;
				　　　　　　position: absolute;
				　　　　　　top: -45px;
				　　　　　　left: -65px;
				　　　　　　-webkit-transform: rotate(-35deg);
				　　　　　　-moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
				　　　　　　-ms-transform: rotate(-35deg);
				　　　　　　-o-transform: rotate(-35deg);
			　　　　}
/* HTML */
<div class="wujiaox"></div>

Seien Sie vorsichtig und sicher um einenInhalt festzulegen:"";Andernfalls können Sie den von den Pseudoklassenelementen angezeigten Stil nicht sehen; Sie müssen auf absolute Positionierung eingestellt sein , und das übergeordnete Element wird auf relativ gesetzt.

4) Chatbox

<span style="color: #000000">/* CSS */<br/>　　　　　　.chatBox {
                width: 200px;
                height: 50px;
                margin: 30px auto;
                background: #5E5E5E;
                border-radius: 5px;
                position: relative;
            }
            
            .chatBox:before {
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 100%;
                top: 15px;
                border-top: 8px solid transparent;
                border-right: 10px solid #5E5E5E;
                border-bottom: 8px solid transparent;
            }            <br/>/* HTML */<br/><p class="chatBox"></p> </span>

5) Bagua-Diagramm ist eigentlich ein großer Halbkreis + zwei kleine Kreise

/* CSS */
　　　　　　.bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }
            
            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }
            
            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */<p class="bagua"></p>

6) „Mauerwerk“-Grafiken

Zeichnen Sie zuerst ein rechtwinkliges Trapez und dann ein Dreieck darunter durch Pseudoklasse Elemente

/* CSS */
　　　　　　.zhuanshi {
                width: 50px;
                height: 0;
                border-style: solid;
                margin: 30px auto;
                border-width: 0 25px 25px 25px;
                position: relative;
                border-color: transparent transparent #5E5E5E transparent;
            }
            
            .zhuanshi:after {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 70px 50px 0 50px;
                border-color: #5E5E5E transparent transparent transparent;
                position: absolute;
                top: 25px;
                left: -25px;
            }

/* HTML */<p class="zhuanshi"></p>

CSS3 Es gibt auch viele Grafikmethoden, die Sie langsam erlernen müssen. Obwohl sie selten verwendet werden, ist es dennoch sehr interessant, sie zum Zeichnen zu verwenden

Das obige ist der detaillierte Inhalt vonEinführung in die neuen Funktionen und Methoden von CSS3 zum Zeichnen gängiger Grafiken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!