26636 sujets

CSS et mise en forme, CSS3

Bordure formée avec un caractère

09 Oct 2018 à 20:21
Bonjour,
De manière similaire à border-image, je souhaiterais à former une bordure, non pas avec une image, mais avec un caractère particulier.
Est-ce possible?
Merci d'avance.
Modifié par pseudo_choisi (10 Oct 2018 - 10:46)
09 Oct 2018 à 22:16
bazooka07 a écrit :
Tu as essayé avec <span>
<p>Bonjour le <span>M</span>onde</p>

Cela affiche
Bonjour le Monde

Ce que je souhaite est
$$$$$$$$$$$$$$$$$$$$$
$ Bonjour le Monde $
$$$$$$$$$$$$$$$$$$$$$
Modifié par pseudo_choisi (09 Oct 2018 - 22:20)
09 Oct 2018 à 22:23
[quote=pseudo_choisi]
Cela affiche
Bonjour le Monde

Ce que je souhaite est l'équivalent de ce que donne 

$$$$$$$$$$$$$$$$$$$$$<br>
$ Bonjour le Monde&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$<br>
$$$$$$$$$$$$$$$$$$$$$<br>
10 Oct 2018 à 08:41
@bazooka07 : je pense qu'il ne s'agissait que d'un exemple pour illustrer....

@pseudo_choisi : pour arrivez à vos fins vous pouvez utiliser la propriété css border-image.
10 Oct 2018 à 08:58
J'ai proposé la solution la plus simple, voire triviale.

Avec border-image, il faut prévoir en 1ère approche 6 images : les 4 angles, bords latéraux, bords haut et bas. En supposant une certaine symétrie dans les bordures.
En considérant une hauteur de ligne constante, on peut réduire à 2 images et utiliser ::before et ::after. La longueur de texte pourra varier.

D'un point de vue graphique, j'avoue ne pas voir la finalité.
10 Oct 2018 à 10:40
bazooka07 a écrit :
Faisons simple :
https://codepen.io/bazooka07/pen/BqWRJm
monospace font is required


Votre css est vide, vous avez tout fait en html!
Comme indiqué, je souhaite avoir une bordure, avec ses propriétés: s'adapter au contenu, indication de la distance aux bords dans la css...
Modifié par pseudo_choisi (10 Oct 2018 - 10:45)
Prévenir un modérateur
Répondre au sujet
Aller à