So zeichnen Sie Dreiecke und Parallelogramme mit CSS

In letzter Zeit habe ich viele Tutorials im Internet gesehen, in denen Sie lernen, wie Sie mit CSS Grafiken zeichnen. Heute werde ich für Sie zusammenfassen, wie Sie mit CSS-Stylesheets Dreiecke und Parallelogramme zeichnen. Interessierte können sich eingehend damit befassen.

Die erste Methode: Verwenden Sie den Rand

Ein Rechteck, um zwei Dreiecke zu verbinden und schließlich ein Parallelogramm zu erstellen. Warum können Dreiecke mithilfe von Rändern generiert werden? Schauen wir uns zunächst ein Bild an:

Nachdem Sie sich den Veränderungsprozess der drei kleinen Formen im Bild angesehen haben, sollten Sie bereits die Hälfte davon verstanden haben. Tatsächlich sind beim Hacken nur zwei Bedingungen erforderlich, um ein Dreieck zu erstellen. Erstens sind die Länge und Breite des Elements selbst 0. Zweitens werden die unnötigen Teile durch Rahmenfarbe ausgeblendet. Mit einer ähnlichen Methode können Sie auch Trapeze erstellen. Die Codes für die drei Formen im Bild oben lauten wie folgt. (Beigefügt ist ein CodePen-Beispiel, http://codepen.io/jerryzou/pen/mJYJym)

#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

Der nächste Schritt besteht darin, zu überlegen, wie man ein Parallelogramm verbindet . . Bei der Randmethode besteht es aus drei Teilen, nämlich dem linken Dreieck, dem Rechteck und dem rechten Dreieck. Es wäre zu umständlich, jedes Mal, wenn ein Parallelogramm gezeichnet wird, drei Elemente zu erstellen, daher sind die Pseudoelemente :before und :after hier eine gute Wahl. Lassen Sie uns diesen Effekt erzielen:

Um Dreiecke und Rechtecke nahtlos miteinander zu verbinden, müssen mehrere Attribute konsistent sein. Verwenden Sie daher etwas wie Less, Sass, Stylus und andere CSS-Präprozessoren erleichtern die Wartung dieses Codes. Die Scss-Version des Codes ist unten angegeben. (Angehängt ist der CodePen-Link, http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)

//三角形的宽高
$height: 24px;
$width: 12px;
 
//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}
 
//单个三角形的样式
@mixin triangle() {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}
 
//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;
 
  &:after {
    @include triangle();
    right: -$width;
  }
 
  &:before {
    @include triangle();
    left: -$width;
  }
 
  @include parallelogram-color(red);
}

Es ist zu beachten, dass, wenn die Neigung des Dreiecks durch $height und festgelegt wird $width ist zu klein oder zu groß, was zu einer gezackten Darstellung führen kann. Daher müssen Sie bei der Verwendung die visuellen Effekte verschiedener Breiten und Höhen testen.

Die zweite Methode: Verwenden Sie Transformation

Die Methode zur Verwendung von Transformation zur Realisierung eines Parallelogramms habe ich beim Einkaufen gesehen. Der Effekt ist ungefähr Es sieht aus so:

Nachdem ich es gesehen hatte, fand ich es erstaunlich. Es stellte sich heraus, dass es nur den äußeren Umriss eines Parallelogramms haben kann. (Da Methode 1 nur Parallelogramme mit Fülleffekten erstellen kann) Sie ist sehr einfach zu implementieren, hauptsächlich mit Hilfe von transform:skew(...). Werfen wir einen Blick auf den Quellcode.

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>
 
<div class="city">上海</div>

Also haben wir diesen Effekt erhalten:

Das müssen Sie denken, wenn Sie das Bild sehen:

Keine Sorge, wir haben tatsächlich das gesamte Div verzerrt, wodurch der Text in der Mitte gekippt wurde, und das ist offensichtlich nicht der Effekt, den wir wollen. Wir müssen also ein inneres Element hinzufügen und das innere Element umgekehrt verzerren, um den gewünschten Effekt zu erzielen:

Der Implementierungscode lautet wie folgt: Angehängt ist ein CodePen Beispiel (http://codepen.io/jerryzou/pen/BNeNwV?editors=110)

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
 
.city div {
  transform: skew(20deg);
}
</style>
 
<div class="city">
  <div>上海</div>
</div>

Zusammenfassung

Die erste Methode verwendet den Randattribut-Hack, um ein Dreieck zu erstellen, Und Durch das Zusammenfügen dreier Elemente wird schließlich ein Parallelogramm erhalten, während die zweite Methode transform:skew verwendet, um ein Parallelogramm zu erhalten. Insgesamt ist die zweite Methode viel kleiner als die erste Methode und leicht zu verstehen. Der einzige Nachteil besteht darin, dass keine Trapeze erstellt werden können, wie sie bei der Paginierung dieser Website verwendet werden.

Ich hoffe, dass dieser Artikel für alle hilfreich ist. Tatsächlich können mit dieser Methode auch Quadrate, Rechtecke und einige gleichseitige Figuren erstellt werden.

Empfohlene Lektüre:

So erstellen Sie QQ Penguin mit HTML und CSS

Verwenden Sie CSS 3, um lange Schatten zu erstellen

CSS, um ein bewegtes Katzengesicht zu erzielen

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Dreiecke und Parallelogramme mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!