Wie kann ich Dreiecke in der Ecke eines Div zeichnen, indem ich entweder Pixel oder Prozentsätze verwende?

Dreiecke in der Ecke eines Div zeichnen

Frage:

Wie kann man auf einer Webseite Dreiecke zeichnen? in der Ecke eines Divs mit bestimmten Pixelwerten oder Prozentwerten?

Antwort:

Es gibt zwei Hauptansätze, um dies zu erreichen:

Absolute Positionierung und Randtricks verwenden:

1. Positionieren Sie das Dreieckselement absolut und setzen Sie seine oberen und rechten Eigenschaften auf 0.
2. Definieren Sie die Abmessungen des Dreiecks mithilfe von Rand- width- und border-color-Eigenschaften. Der folgende Code zeichnet beispielsweise mithilfe von Randtricks ein grünes Dreieck in der oberen rechten Ecke:

<code class="css">.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}</code>

Drehung und Zuschneiden verwenden:

1. Positionieren Sie das Dreieckselement relativ innerhalb des Div.
2. Drehen Sie das Dreieckselement um 45 Grad mit „transform: rotation(45deg)“.
3. Verstecken Sie das überschüssige Dreieck, das über die Grenze des Div hinausragt, mit „Overflow“: versteckt.

Hier ist ein Beispiel für die Verwendung dieses Ansatzes:

<code class="css">.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: relative;
  top: 10%;
  left: 90%;
  width: 10%;
  height: 10%;
  -webkit-transform: rotate(45deg);
  background: green;
}</code>

Beide Methoden ermöglichen die Anpassung der Form und Position des Dreiecks mithilfe von Prozentsätzen oder absoluten Werten und sorgen so für Flexibilität auf der Webseite Design.

Das obige ist der detaillierte Inhalt vonWie kann ich Dreiecke in der Ecke eines Div zeichnen, indem ich entweder Pixel oder Prozentsätze verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!