How to Add Text in Borders Using Basic HTML Elements | CSS-Tricks

Rigolo : comment mettre du texte dans les rebords d'un cadre ? Genre comme ça:

Capture du 2020-12-06 14-18-45.png

En utilisant des fieldsets et leur legend...

<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>


body{
  display: grid; 
  margin: auto; 
  margin-top: calc(50vh - 170px); 
  width: 300px; height: 300px; 
}
fieldset{
  border: 10px solid transparent; 
  border-top-color: black; 
  box-sizing: border-box; 
  grid-area: 1 / 1; 
  padding: 20px; 
  width: inherit; 
}
fieldset:nth-of-type(1){ 
  background: content-box center/contain no-repeat url("photo-1588852065463-5de1411ea697?w=400"); 
}
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
legend{
  font: 15pt/0 'Averia Serif Libre'; 
  margin: auto; 
  padding: 0 4px; 
} 
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 

body {
  user-select: none;
  -webkit-user-select: none;
}

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le premier caractère du mot nvzb5rh ?