Comment superposer une image avec du texte avec un arrière-plan arrondi

Question

Je dois copier en HTML ce que vous voyez dans cette image :

Le problème est que le texte couvre le div et l'image d'arrière-plan. S'il n'y avait pas d'image dans le div externe ni de couleur unie, j'imagine que je pourrais le faire assez facilement avec quelques petits éléments HTML aux coins arrondis placés aux bons endroits, mais l'image d'arrière-plan est ce qui ajoute de la complexité.

Pour l'instant j'ai ça... Comme vous pouvez le voir, je suis coincé sur deux coins arrondis. Quelqu'un peut-il proposer une solution? Veuillez noter qu'il doit fonctionner dans tous les navigateurs modernes :

#outer {
    largeur : 100 % ;
    hauteur : 400 px ;
    rayon de bordure : 20 px ;
    image d'arrière-plan:url(https://media.istockphoto.com/id/1323032473/es/vector/panal-abstracto-de-vector-azul-moderno-con-fondo-de-monitor-de-coraz%C3% B3n-con-para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
    position : relative ;
}
#texteintérieur {
    affichage:en ligne;
    bordure en haut à droite : 20 px ;
    couleur d'arrière-plan :#fff;
    remplissage : 5px 25px 0px 5px ;
    taille de police : 40 px ;
    couleur : #000 ;
    
    position : absolue ;
    bas :0px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="outer">
    <div id="innertext">Un titre de test<br>qui est sur deux lignes</div>
</div>

Answer 1

Vous devez ajouter l'élément :before 和 :after 添加到 .innertext

Mise à jour :

Pour avoir plusieurs lignes, ajoutez simplement un coin flex-direction: column 容器，每行都会有 :after （右）角，并且只有第一个子元素将有 :before (supérieur)

#outer {
  width: 100%;
  height: 400px;
  border-radius: 20px;
  background-image: url(https://media.istockphoto.com/id/1323032473/es/vector/panal-abstracto-de-vector-azul-moderno-con-fondo-de-monitor-de-coraz%C3%B3n-con-para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
  position: relative;
}
#inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  bottom: 0px;
}
.innertext {
  display: inline;
  position: relative;
  border-top-right-radius: 20px;
  background-color: #fff;
  padding: 5px 25px 0px 5px;
  font-size: 40px;
  color: #000;
}
.innertext:first-child::before,
.innertext::after {
  content: "";
  display: block;
  width: 40px;    /* double the radius */
  height: 40px;   /* double the radius */
  background-color: transparent;
  position: absolute;
  border-bottom-left-radius: 20px;
  box-shadow: 0 20px 0 0 #fff;  /* this to create the inverted corner border radius area, if you desire to change the positon you can control it via the first two values 0 20px which represents the x & y */
}
.innertext::before {
  top: -40px;
  left: 0;
}
.innertext::after {
  right: -40px;
  bottom: 0;
}
.innertext span {
  position: relative;
  z-index: 1;   /* to overcome the overlapping with the text */
}

<div id="outer">
  <div id="inner-container">
    <div class="innertext"><span>A test</span></div>
    <div class="innertext"><span>A test with a second line</span></div>
  </div>
</div>