Discussion :

[Ushuango]

Bonjour,

je cherche à faire un bouton avec une bordure particulière !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="#">lien</a></li>

je ne sais pas si ça se fait en css !! (sûrement que si, mais moi je ne sais pas)
Je n'ai vraiment aucune idée de comment s'y prendre !

une bordure du genre:

[darkstar123456]

Bonjour,

Ce n'est pas forcément quelque chose de simple à faire.

Il est possible d'utiliser la propriété border-image : https://developer.mozilla.org/fr/doc...S/border-image
Il est également possible de générer un SVG avec une bordure et de le mettre en background : https://kovart.github.io/dashed-border-generator/ (exemple : https://codepen.io/DarkStar123456/pen/GREBRJy)

Le problème de ces 2 techniques c'est qu'elles ne sont pas vraiment responsive et donc si on ne connait pas la taille du block l'image va être déformée dans le premier cas, et la bordure va être incomplète dans le second cas.

Pour palier à ça, il est possible d'utiliser la seconde technique et générer de SVG à la volée mais c'est quand même assez compliqué.
Pour avoir déjà été confronté à un problème similaire, je préfère encore ajouter des <span></span> dans mon lien (quitte à ajouter les span en JS) et faire du CSS en utilisant les positions relative/absolute et les pseudo-éléments before/after

EDIT : Voici un exemple de ce que j'expliquais avec les span et la génération de l'HTML via jQuery : https://codepen.io/DarkStar123456/pen/RwgBwaj
J'ai coloré les bordures pour qu'on puisse identifier chaque before/after

[jreaux62]

bonjour,

une solution (+ animation) :

• https://codepen.io/jreaux62/pen/QWgBEgP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
  <li class="cadre"><a href="#">ceci est le 1er lien</a></li>
  <li class="cadre"><a href="#">voilà un autre lien</a></li>
  <li class="cadre"><a href="#">encore un lien, mais un peu plus long</a></li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.cadre {
  position:relative;
  display: inline-block;
  /*border: 3px solid #ddd;*/
  box-sizing:border-box;
  padding: 0;
  margin:5px;
}
.cadre > a {
  position:relative;
  display: block;
  height:100%;
  padding: 0.7em 1em 1em;
}
/* top left */
.cadre:before {
  position:absolute;
  content: "";
  display: block;
  width: 30%; height: 20%;
  top: -3px; left: -3px;
  border-top: 3px solid green;
  border-left: 3px solid green;
}
/* top right */
.cadre > a:before {
  position:absolute;
  content: "";
  display: block;
  width: 30%; height: 20%;
  top: -3px; right: -3px;
  border-top: 3px solid green;
  border-right: 3px solid green;
}
/* bottom right */
.cadre:after {
  position:absolute;
  content: "";
  display: block;
  width: 30%; height: 20%;
  bottom: -3px; right: -3px;
  border-bottom: 3px solid green;
  border-right: 3px solid green;
}
/* bottom left */
.cadre > a:after {
  position:absolute;
  content: "";
  display: block;
  width: 30%; height: 20%;
  bottom: -3px; left: -3px;
  border-bottom: 3px solid green;
  border-left: 3px solid green;
}
/* ---- */
/* deco */
.cadre > a {
  color:green; 
  text-decoration:none;
}
.cadre:hover > a {
  text-decoration:none;
}
/* -------------------- */
/* animation sur :hover */
.cadre, .cadre > a,
.cadre:before, .cadre > a:before,
.cadre:after, .cadre > a:after {
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.cadre:hover:before {
  width: 50%; height: 50%;
}
.cadre:hover > a:before {
  width: 50%; height: 50%;
}
.cadre:hover:after {
  width: 50%; height: 50%;
}
.cadre:hover > a:after {
  width: 50%; height: 50%;
}

[NoSmoking]

Bonjour,
il me semble que dans vos propositions il manque l'utilisation des background-image qui peuvent être multiples et qui associées aux effets comme linear-gradient, entre autres, autorisent à peut près tout.

Il suffit de considérer que chaque trait est une image, donc il y en a au moins 8, et de les définir comme l'on le souhaite.

Exemple en utilisant les variables CSS pour plus de facilité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.bordure {
  --ep: 3px;
  --long: 30%;
  --haut: 30%;
 
  /* Nota : ne pas utiliser currentColor qui bug sous Chrome avec linear-gradient */
  --coul: #069;
 
  padding: var(--ep);
 
  background-image:
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul)),
    linear-gradient(var(--coul), var(--coul));
 
  background-size:
    var(--long) var(--ep),    var(--long) var(--ep),    /* horizontales à gauche */
    var(--long) var(--ep),    var(--long) var(--ep),    /* horizontales à droite */
    var(--ep)   var(--haut),  var(--ep)   var(--haut),  /* verticales en haut */
    var(--ep)   var(--haut),  var(--ep)   var(--haut),  /* verticales en bas */
    100%;
 
  background-position:
    top left,     bottom left,
    top right,    bottom right,
    top right,    top left,
    bottom left,  bottom right;
 
  background-repeat: no-repeat;
 
}

Tout est dans la même règle CSS, on ne crée pas d'élément supplémentaire, on peut ajouter un fond, en respectant l'ordre des couches donc en dernier, on peut personnaliser chaque trait ... et même animer le tout.

C'est un peu fastidieux car il faut définir chaque trait en image, size et position, mais on peut faire des trucs super !

[Ushuango]

Bonjour,

merci de toutes vos réponses, je suis gâté !
Sur le moment, j'ai utilisé la première solution de darkstar123456 car j'ai pas mal de choses à faire sur toutes les pages ...
Mais je reviens dès que je peux, pour étudier les autres !!!