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:
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...