Sortir du border en css

C’est une astuce rapide pour permettre de sortir un titre ou autre ,  d’un cadre border en css en laissant une partie du carde ouverte.

Sortir du border css

Pour sortir un titre d’un bloc en cachant la bordure css n’a rien de compliqué sur un fond uni, en effet il suffit de mettre un background derrière le titre a remonté de la couleur du fond de votre page.
Cependant lorsque l’on utilise cette technique sur une photo, ou un dégradé un problème se pose.
Comment rendre cette action transparente ? Comment coupé la bordure d’un bloc ?

Les pseudo éléments pour sortir du cadre

Comment souvent les pseudo éléments :after et  :before nous sauvent.
Comme dans l’article sur les info-bulles ils vont nous servir a dessiner la partie du border à casser.
En effet il suffit de créer un bloc au dimensions définies, puis lui ajouter un border sur les 3 cotés non coupé. et d’y ajouter un :after et un :before pour dessiner le reste du cadre.

div{
 width:400px;
 border:1px solid #fff;
 border-top:none;
 position:relative;
 margin-top:25px;
 background:rgba(0,0,0,0.2)
}
div:before{
content:'';
 display:block;
 height:1px; width:20px;
 background:#fff;
}
div:after{
content:'';
 display:block;
 height:1px;
 width:70%;
 background:#fff;
 position:absolute;
 top:0;
 right:0;
}

Votre carde est réalisé avec une cassure en haut.

Remonter un élément au centre du border

Pour remonter un éléments plus haut que la div qui le contient, cela peut être une image un titre, peut importe.
Il vous suffit, en suite, de le positionné en absolute et lui ajouter une marge haute négative.
Dans l’exemple ci dessous avec un h2

h2{
position:absolute;
 margin-top: -15px;
}

L’exemple en pratique

Vous pouvez, au final, avec cette astuce à ajouter a votre site web ne nombreuse déclinaisons.
Par exemple, un témoignage avec une photo au dessus, ou un résumer d’article avec en bas un « savoir plus » dépassant du cadre.