Wie erstelle ich in CSS ein transparentes Dreieck mit einem Rand?

Mit CSS ein transparentes Dreieck mit Rand erstellen

Eine der häufigsten Herausforderungen in CSS ist das Erstellen von Formen mit Rändern. Eine solche Form, deren Erstellung schwierig sein kann, ist ein transparentes Dreieck mit sichtbarem Rand.

Konventioneller Ansatz

Wie Sie in Ihrer Frage erwähnt haben, besteht ein gängiger Ansatz darin Verwenden Sie Ränder, um die Illusion eines Dreiecks zu erzeugen:

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

Während diese Methode die gewünschte Form erreichen kann, erfordert sie die Verwendung eines Tricks mit Rändern, der in bestimmten Situationen möglicherweise nicht ideal ist.

Nur ​​WebKit-Lösung

Für einen eleganteren Ansatz können Sie eine reine WebKit-Lösung verwenden, die das ▲-Zeichen nutzt:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

Diese Technik nutzt das -webkit-text-Stroke-Eigenschaft, um einen Strich um das Zeichen zu erstellen, was zu einer dreieckähnlichen Form führt. Die Farbeigenschaft ist auf transparent gesetzt, um das Zeichen selbst unsichtbar zu machen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS ein transparentes Dreieck mit einem Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!