Text dans les balises HTML CSS de bordure

Question

Je voudrais avoir une div qui ressemble à ceci :

Est-il possible de le faire avec HTML + CSS ? Je vais également animer cette div avec jQuery. Lorsque la div est masquée, je voudrais que le titre et la ligne du haut s'affichent.

Answer 1

Vous pouvez utiliser une balise de champ.

  Personalia:
  Name: 
  Email: 
  Date of birth: 

Vérifiez ce lien : Balise HTML

Answer 2

Pour un doublon, voici une autre option avec transform, sans fieldset (et une bordure arrondie requise dans les doublons) :

Question

Aide. Je ne suis pas fort en UX. Je crée une application en React et j'utilise Material UI pour l'apparence. Je voudrais vraiment créer quelque chose comme ça

Où le "Some Title" est un champ dynamique provenant de ma base de données ainsi que le contenu. La chose que je ne peux pas comprendre est quelle est la meilleure façon (non bidon) d'ajouter le titre dans le contour? Des idées?

Réponse la position ou le transform peut également vous aider :

* {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}

.fieldset {
  border: solid;
  color: #353fff;
  border-radius: 1em;
  margin: 2em 1em 1em;
  padding:0 1em 1em;
}

.legend {
  transform: translatey(-50%);
  width: max-content;
  background: white;
  padding: 0 0.15em;
}

.fieldset li {
  list-style-type: " - ";
}

  Some Title

    Item
    Item
    Item
    Item

Answer 3

Si vous n'êtes pas en mesure d'ajouter un ensemble de champs, vous pouvez ajouter un arrière-plan à l'élément. Dans ma situation, j'avais des couleurs différentes dans l'élément d'entrée et à l'extérieur de l'élément d'entrée, et nous avons également une couleur de survol pour l'élément d'entrée. J'ai donc ajouté une correction en ajoutant un arrière-plan de dégradé linéaire avec la couleur extérieure dans la moitié supérieure et une couleur transparente dans la moitié inférieure. J'ai ajouté la couleur transparente à la moitié inférieure afin de voir la couleur de survol lorsqu'elle est survolée.

.nom-de-classe {
  background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}

Answer 4

Sur un plan pratique, je pense que PeterS a la meilleure réponse. C'est aussi présenté dans un style très clair et didactique.

Juste pour économiser quelques minutes à d'autres en le convertissant en un code de style plus productif, j'ai fait ce qui suit. Fondamentalement, c'est ce que vous pensez avoir besoin: Une boîte div à l'intérieur d'une autre, la boîte div extérieure fournissant la bordure, la boîte intérieure fournissant le contenu du titre avec une marge négative le décalant vers le haut. Ensuite, une troisième div contient le contenu réel.

.outer-border-box {
  border: 2px solid black;
  border-top: 3px solid black;
}

.label-source-box {
  padding: 0 3px;
  height: 100px;
  margin-top: -0.8em;
}

.box-title {
  background: white none repeat scroll 0 0;
  padding: 0 2px;
  margin-left: 4em;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Avenir Next', Helvetica, sans-serif;
}

    Promotionnel 

      voici le contenu

Answer 5

Une idée basée sur : https://css-tip.com/horizontal-line-title/

.box {
  --s: 3px; /* épaisseur de la ligne */
  --g: 10px; /* écart */
  --c: #000; /* couleur */

  margin: 50px;
  border: var(--s) solid var(--c);
  border-top: 0;
  height: 100px;
  font-size: 20px;
  position: relative;
  clip-path: inset(-999px 0 0)
}
.box span {
  position: absolute;
  left: 10%; /* ajustez ceci pour contrôler la position */
  top: 0;
  translate: 0 -50%;
  border-image: 
   linear-gradient(var(--c) 0 0) 
   0 1/calc(50% - var(--s)/2) 100vw/0 calc(100vw + var(--g))
}

body {
  background: lightblue;
}

  Titre