Comment créer un triangle transparent avec une bordure noire en utilisant CSS ?

Créer un triangle transparent avec une bordure à l'aide de CSS

Question :

Comment pouvons-nous créer un triangle transparent avec une bordure noire en utilisant CSS, à l'exclusion des vecteurs SVG ?

Réponse :

Solution WebKit uniquement :

Une approche exclusive à WebKit consiste à utiliser le caractère ▲ :

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

.triangle {
-webkit-text-stroke : 12px noir;
couleur : transparent;
taille de police : 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">

Cette méthode crée une forme de triangle à l'aide de la propriété -webkit-text-stroke spécifique à WebKit, qui décrit le texte avec un trait de la couleur et de l'épaisseur spécifiées. Le texte lui-même est défini sur transparent, ce qui rend le triangle effectivement transparent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html webkit using class Property this border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn