2016-10-21 2 views
-4

quelqu'un peut me s'il vous plaît me conseiller comment réaliser les bordures/contour comme sur l'image que je joins. J'ai essayé beaucoup de choses mais toujours pas de succès.CSS bordure/contour qui va au-dessus d'une ligne de texte

enter image description here

+1

Cette conception fait un peu bizarre (si pas mal) mais vous pouvez y parvenir par un texte absolument positionnement. – Harry

+1

Cela ressemble à quelque chose qui ne va pas avec votre CSS. Ne fais pas ça. – Turnip

+1

Bienvenue sur Stackoverflow! Veuillez lire https://stackoverflow.com/help/how-to-ask avant de poser des questions. – connexo

Répondre

0

Vous pouvez accomplir cela en utilisant une marge négative sur l'en-tête.

Pas mon choix de conception, mais c'est possible.

* { margin: 0; padding: 0; } 
 
body { 
 
    padding: 1em; 
 
} 
 
div { 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
} 
 
h3 { 
 
    margin-top: -1.5em; 
 
    margin-bottom: 1em; 
 
    border-bottom: 1px solid black; 
 
} 
 
p { 
 
    border-left: 1px solid black; 
 
}
<div> 
 
    <h3>Chapter</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales velit non ligula dictum, vitae sagittis diam maximus. Vivamus finibus, nibh sed fringilla accumsan, mi neque convallis lorem, et viverra quam libero vel risus. Maecenas varius blandit dui, et suscipit massa sodales tincidunt. Donec at dui blandit, sollicitudin elit nec, tincidunt dui. Aenean facilisis tellus et velit mollis, nec efficitur lacus volutpat. Proin dapibus odio sem, fringilla ullamcorper tellus porta eget. Nunc sed egestas enim, eget gravida urna.</p> 
 
</div>

+0

Merci beaucoup! Bon travail. Je m'excuse auprès des autres si ma question est trop basique. Merci encore une fois! – Dzon