CSS implementiert verschiedene grundlegende Grafiken

Dreieck

Beim Schreiben von CSS bin ich es gewohnt, Hintergrundbilder zu verwenden und ignoriere, dass CSS selbst tatsächlich viele einfache Grundformen, wie zum Beispiel Dreiecke, realisieren kann:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

Rendering:

Ich bin verwirrt, warum wird ein Dreieck angezeigt, wenn Breite und Höhe 0 sind? Gewöhnliche Ränder scheinen vier gerade Linien zu sein, aber das ist nicht der Fall. Ändern Sie den Dreieckscode und zeigen Sie seine beiden Seiten als Beispiel:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

Rendering:

Plötzlich wurde mir klar, dass die Grenze tatsächlich ein gleichschenkliges Trapez ist!

Welche anderen Formen können also erstellt werden (der folgende Code ist den Formen von CSS entnommen)?

Kreis

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

verwendet hauptsächlich das border-radius-Attribut, um das Rechteck abzurunden. Der Wert kann eine Länge (px) oder ein Prozentsatz sein. Der Prozentsatz wird in die Länge umgewandelt. In diesem Beispiel bedeutet 50 % 水平圆角半径=宽度*50%, 垂直圆角半径=高度*50%, sodass das direkte Schreiben von 100px gleichbedeutend ist.

Parallelogramm

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

Verwendung der transform Neigungseigenschaften wie folgt:

• in Richtung x -Achsenrichtung (horizontal nach rechts) Neigung um 160°: Sie können sich vorstellen, dass die rechte Seite des Rechtecks ​​um 160° gegen den Uhrzeigersinn gedreht wird (bei einer Drehung um 90° fallen die vier Seiten zusammen und die Figur verschwindet; bei einer Drehung über 90° hinaus). °, es ähnelt der Symmetrie; wenn die Drehung 180° überschreitet, ist es wie eine Drehung im Kreis)

• Neigung in Richtung der y-Achse (horizontal nach unten), was möglich ist Stellen Sie sich die Grundfläche eines Rechtecks ​​vor, das sich im Uhrzeigersinn dreht.

Fünfeck

Es ist Zeit, den Schwierigkeitsgrad zu erhöhen. Mal sehen, wie man ein Fünfeck zeichnet⭐️? Der fünfzackige Stern besteht aus drei gleichschenkligen Dreiecken.

Die drei Winkel eines Dreiecks betragen jeweils 36°, 36° und 108°. Zu diesem Zeitpunkt entspricht das Zeichnen eines fünfzackigen Sterns dem Zeichnen von drei Dreiecken. Die am Anfang des Artikels erwähnte Methode kann nur gleichschenklige Dreiecke mit festen Winkeln zeichnen. Wenn Sie border sorgfältig studieren, ist der Winkel tatsächlich kontrollierbar, wie unten gezeigt:

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

Durch die Einstellung unterschiedlicher Längen für den Rand wird die Form des Randes verändert : Nehmen Sie das rote Dreieck im Bild oben als Beispiel: Aus dem Kosinussatz, den wir in der High School gelernt haben, wissen wir, dass wir den Winkel des Dreiecks und die Länge jeder Seite kennen. Die Form des Dreiecks kann bestimmt werden. Theoretisch ist es also möglich, Dreiecke unterschiedlicher Größe zu realisieren, indem die Längen von einem border-left + border-right und drei p gesteuert werden. Nach einiger Übung ist es fast unmöglich, mit dieser Methode ein regelmäßiges Fünfeck zu zeichnen, da es schwierig ist, einen ganzzahligen Wert zu erhalten. border

Der Originalcode lautet wie folgt (

Ich bin überrascht, wie der ursprüngliche Autor die Breite dieser Ränder berechnet hat):

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Andere interessante Grafiken

Diamant

entsteht durch die Kombination eines Trapezes und eines Dreiecks

Pac-Man

einen Kreis, rechte Seite ausblenden

Dialogfeld

Ein Dreieck, ein abgerundetes Rechteck hinzufügen

Dreieck

Beim Schreiben von CSS bin ich es gewohnt, Hintergrundbilder zu verwenden und ignoriere, dass CSS selbst tatsächlich viele einfache Grundgrafiken wie Dreieck realisieren kann:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

Effekt Bild:

百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

效果图：

恍然大悟，原来边框其实是等腰梯形！

那么还可以做其他哪些图形（以下代码摘自 the shapes of css）？

圆形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

主要利用了 border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

利用 transform 倾斜特性如下：

• 向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）

• 向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border 的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下（很惊讶原作者是如何算出来这些边框宽度的）：

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

其他有趣的图形

钻石

通过一个梯形和一个三角形组合而成

吃豆人

一个圆形，隐藏右侧边

对话框

一个三角形，加一个圆角矩形

更多css 实现各种基本图形相关文章请关注PHP中文网！