border-color transparent de la propriété
J'ai trouvé ça cool exemple de border-color
's transparent
de la propriété d'usage de faire une flèche.
Je comprends comment les frontières sont dessinées et comment un élément vide avec un côté jeu de frontière peut aider à atteindre flèche en effet, mais ce qui me fait errer dans cet exemple est l'utilisation de transparents.
Jetez un oeil à ce simple code:
<div id="daniel"></div>
CSS:
#daniel{
border-color: rgba(111,111,111,0.2) transparent transparent;
border-style: solid;
border-width: 15px;
position: absolute;
}
Avec ce code j'obtiens une flèche pointant vers le bas. (JSFIDDLE)
Avec un seul transparent-je obtenir une hourglass
effet. (JSFIDDLE):
border-color: rgba(111,111,111,0.2) transparent;
Ce qui me confond est de ne pas savoir ce que border-{side}
transparent
se réfère dans cette abréviation propriétés.
L'espoir qui fait sens.
Toute aide appréciée.
Merci 😉
OriginalL'auteur daniel.tosaba | 2012-02-03
Vous devez vous connecter pour publier un commentaire.
il y a une règle simple pour l'ordre dans lequel les côtés apparaissent dans de tels abréviation de notations:
Difficulté: Haut, Droite, Bas, Gauche
si vous avez moins de 4 arguments, les disparus sont remplis avec les règles suivantes (selon le nombre d'arguments sont manquantes):
donc dans votre exemple
selon les règles, nous avons
similaire dans l'autre exemple:
on obtient l'
rgba
se réfère à tous les côtés et puis avec la transparence par la suite, vous choisissez ceux que vous souhaitez de ne pas être là. Merci man, merci à tous!OriginalL'auteur Sirko
Ce que vous devez savoir, c'est
border-color:red black blue;
fera la bordure supérieure rouge, le fond en bleu et de la gauche et celles de droite noir, et qui explique pourquoi vous obtenez une flèche dans votre premier exemple:Il explique également le 2ème exemple:
Exemple
Source
Pour les détails de l'explication de la CSS triangle effet, voir: Comment est-ce CSS en forme de triangle de travail?
OriginalL'auteur Soufiane Hassou
Qui se réfère à la Frontière de style. Regarder les spécifications de w3c
OriginalL'auteur HardCode
Votre
premier exemple
Définir
vérifier cet exemple http://jsfiddle.net/hDpnw/8/
&
votre
deuxième exemple
Définir
vérifier cet exemple http://jsfiddle.net/hDpnw/7/
OriginalL'auteur sandeep