Bordure uniquement une partie d'un côté

**X260SH** · 15/08/2013, 19h30

Bonjour !

Après quelques recherches sur le web, vaines, je me tourne vers vous pour savoir comment utiliser border sur uniquement une partie d'un côté. Une image vaut mieux qu'un grand discours :

Voilà ce que je cherche à faire.

Je compte l'utiliser sur un <div>, et un <p>.

Merci d'avance !

**rodolphebrd** · 15/08/2013, 19h53

Bonjour,

Envoyé par X260SH

Une image vaut mieux qu'un grand discours :

un code vaut mieux qu'une image.

**X260SH** · 15/08/2013, 21h22

C'est vrai, petit oublie, désolé...

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<doctype HTML>
<html>
<head>
</head>
<body>
<div>Titre</div>
<div class="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis congue sem, quis dictum nulla feugiat ut. Etiam vitae ultrices mauris. Fusce tempus sem ac erat sollicitudin, et bibendum augue scelerisque. Proin semper condimentum odio ac commodo. Pellentesque sed justo eget lectus hendrerit hendrerit vitae vel arcu. Nam ornare eros aliquam dolor tempus, et molestie nisi facilisis. Sed adipiscing scelerisque odio, eget lobortis enim aliquam eget. Phasellus egestas mauris eget luctus scelerisque. Fusce bibendum turpis lobortis urna sagittis vehicula. Sed non magna erat. In varius, urna eu condimentum rhoncus, libero mi feugiat ligula, vitae feugiat est justo in lacus. Phasellus porta orci sit amet tempor feugiat.</p>
<p>Quisque luctus ipsum eget accumsan consequat. Etiam aliquam sapien at sapien venenatis, molestie placerat mauris ultricies. Etiam sit amet lobortis lectus, iaculis volutpat sem. Sed porta enim a nisl vulputate, in convallis massa lobortis. Cras justo tortor, tempor ut purus a, pretium congue risus. In aliquet est quis mi placerat pretium. Aliquam auctor auctor ultrices. In hac habitasse platea dictumst. Aliquam nulla risus, porta ac elit ac, vestibulum malesuada elit. Proin in ultrices enim. Praesent id tristique est. Nullam convallis eget felis eget vehicula. Nam molestie urna vitae semper congue. Maecenas lectus nulla, venenatis eget interdum sit amet, pulvinar sed libero.</p>
</div>
</body>
</html>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
p
{
padding:15px;
text-indent:2em;
text-align:justify;
}
 
div.article
{
border:1 solid #000000; /*C'est ici que je voudrais définir la bordure montrée dans l'image. */
}

**rodolphebrd** · 15/08/2013, 21h45

Une solution rapide avec des pseudo-éléments before et after.

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
p{
padding:15px;
text-indent:2em;
text-align:justify;
}
 
.article{
  position: relative;
  width:800px;
  border-top:3px solid #000000;
  border-left:3px solid #000000; 
  border-bottom:3px solid #000000; 
}
.article:after{
  content:"";
  height: 100px;
  border-left:3px solid black;
  position: absolute;
  top:0;
  right:0;
}
.article:before{
  content:"";
  height: 100px;
  border-left:3px solid black;
  position: absolute;
  bottom:0;
  right:0;
}

http://codepen.io/anon/pen/pmtvj

Invité · 15/08/2013, 22h13

Bien vu ! (je n'y avais pas pensé !)

Du coup, j'ai amélioré pour ajouter le petit trait horizontal en bas à droite.
Comme :after et :before sont déjà pris, j'ai mis une balise <ins></ins> avant </div> :

Code html :

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

1
2
3
4
5
6
<div>Titre</div>
<div class="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis congue sem, quis dictum nulla feugiat ut. Etiam vitae ultrices mauris. Fusce tempus sem ac erat sollicitudin, et bibendum augue scelerisque. Proin semper condimentum odio ac commodo. Pellentesque sed justo eget lectus hendrerit hendrerit vitae vel arcu. Nam ornare eros aliquam dolor tempus, et molestie nisi facilisis. Sed adipiscing scelerisque odio, eget lobortis enim aliquam eget. Phasellus egestas mauris eget luctus scelerisque. Fusce bibendum turpis lobortis urna sagittis vehicula. Sed non magna erat. In varius, urna eu condimentum rhoncus, libero mi feugiat ligula, vitae feugiat est justo in lacus. Phasellus porta orci sit amet tempor feugiat.</p>
<p>Quisque luctus ipsum eget accumsan consequat. Etiam aliquam sapien at sapien venenatis, molestie placerat mauris ultricies. Etiam sit amet lobortis lectus, iaculis volutpat sem. Sed porta enim a nisl vulputate, in convallis massa lobortis. Cras justo tortor, tempor ut purus a, pretium congue risus. In aliquet est quis mi placerat pretium. Aliquam auctor auctor ultrices. In hac habitasse platea dictumst. Aliquam nulla risus, porta ac elit ac, vestibulum malesuada elit. Proin in ultrices enim. Praesent id tristique est. Nullam convallis eget felis eget vehicula. Nam molestie urna vitae semper congue. Maecenas lectus nulla, venenatis eget interdum sit amet, pulvinar sed libero.</p>
<ins></ins>
</div>

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
.article{
  position: relative;
  width:800px;
  //height:300px;
  border-top:1px solid #000000;
  border-left:1px solid #000000; 
  border-bottom:0; /* on efface la bordure basse */
}
.article:after{
  content:"";
  height: 100px;
  border-left:1px solid black;
  position: absolute;
  top:0;
  right:0;
}
.article:before{
  content:"";
  height: 100px;
  border-left:1px solid black;
  position: absolute;
  bottom:0;
  right:0;
}
.article ins{ /* trait horizontal en bas à droite */
  width: 80px; /* longueur du trait */
  height: 0px;
  border-bottom:1px solid black;
  position: absolute;
  bottom:0;
  right:0;
}

Ça ouvre des perspectives intéressantes...

**X260SH** · 15/08/2013, 22h32

C'est super, c'est exactement ce que je voulais ! Merci beaucoup !
Cependant, je pense qu'avec cette méthode, on ne peux pas faire plus de deux lignes pour un côté. Donc, comment faire si je veux faire "trait-blanc-trait-blanc-trait" sur une bordure ?

Outspeed : Merci beaucoup ! Il faut donc mettre une balise <ins>.
Résolu.

Invité · 15/08/2013, 22h45

<ins> n'est pas obligatoire (c'était juste pratique pour l'exemple).

On peut très bien mettre des balises :

Code :

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

1
2
3
4
<div id="trait1"></div>
<div id="trait2"></div>
<div id="trait3"></div>
...

Bordure uniquement une partie d'un côté

CSS

Vue hybride

Discussions similaires

Partager

Partager