28172 sujets

CSS et mise en forme, CSS3

Hello
le titre n'est peut être pas le meilleur ...

Je m'explique :

- j'ai une div, avec du contenu texte (je ne connais pas en avant le taille du contenu), et j'ai une bordure tout autour de cette div. jusque là ok, sa ressemble à une boite quoi Smiley smile

- Je souhaite.... mettre parallèlement (verticalement) sur la gauche (espacé de 30 pixel) une bar vertical prenant tout la hauteur du ma "boite". d'où le titre "bordure flottant", car visuellement, cela ressemble à une border-left, de la taille de la vrai bordure mais .. à l'exterieur.

Je vois pas du tout comment faire.
Administrateur
Bonjour,

yep quelque chose comme ça : http://codepen.io/anon/pen/dYempb

.box {
  position: relative;
  border: 4px solid tomato;
}
.box:before {
  content: '';
  position: absolute;
    left: -12px;
    top: -4px; bottom: -4px;
  border-left: 4px solid slateBlue;
}


Bordure multiple j'ai pas testé comment ça se comporte avec une triple bordure sur un seul côté (ici bleu transparent tomato)
Box shadow est une autre possibilité