Wie erstelle ich mit CSS ein transparentes Dreieck mit schwarzem Rand?

Mit CSS ein transparentes Dreieck mit einem Rand erstellen

Frage:

Wie können wir Mit CSS ein transparentes Dreieck mit schwarzem Rand erstellen, SVG-Vektoren ausschließen?

Antwort:

Nur ​​WebKit-Lösung:

Ein WebKit-exklusiver Ansatz beinhaltet die Verwendung des ▲-Zeichens:

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

.triangle {
-webkit-text-Stroke: 12px schwarz;
Farbe: transparent;
Schriftgröße: 200px;
}

<pre class="brush:php;toolbar:false">

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

▲

<pre class="brush:php;toolbar:false">

Diese Methode erstellt eine Dreiecksform mithilfe der WebKit-spezifischen Eigenschaft -webkit-text-Stroke, die Umrandet den Text mit einem Strich der angegebenen Farbe und Stärke. Der Text selbst ist auf transparent eingestellt, wodurch das Dreieck effektiv transparent wird.

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

css html webkit using class Property this border

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn