<p>Pour ma candidature, je crée une page d'inscription avec des limites de section non standard. Vous pouvez voir ce que j'essaie de réaliser ici : Ce n’est pas un simple arc : il comporte deux lignes droites et un arc entre les deux. </p> <p>Pour autant que je sache, la meilleure façon d'obtenir quelque chose comme ceci est d'utiliser SVG. Le problème est que la zone blanche aura une image couvrant toute la zone. À des fins de démonstration, j'utiliserai du bleu clair. Si vous utilisez un <code>div</code> standard avec l'attribut <code>background-image</code>, la couleur blanche du SVG est opaque, vous obtenez donc le résultat suivant : </p> <p>Conseil, lisez plus tard les propriétés <code>shape-outside</code> et <code>clip-path</code> composants stylisés ):</p> <pre class="brush:php;toolbar:false;">const LeftContainer = styled(FlexContainer)` largeur : 55 % ; hauteur : 100 % ; couleur de fond : bleu clair ; indice z : 1 ; /* arrière-plan : gradient linéaire(360deg, #FFFFFF 24,95%, rgba(255, 255, 255, 0) 50,95%), url(${process.env.PUBLIC_URL}/TestImage.png); `; const RightContainer = style (FlexContainer)` largeur : 45 % ; hauteur : 100 % ; /* couleur d'arrière-plan : ${colors.secondary600} ; flotteur : gauche ; /* image d'arrière-plan : url(${process.env.PUBLIC_URL}/SignUpBackground.svg); répétition d'arrière-plan : pas de répétition ; taille de l'arrière-plan : couverture ; position d'arrière-plan : centre ; position : relative ; indice z : 5 ; chemin du clip : url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar); `;</pré> <p>Il y a encore un espace, mais plus encore, le tiers inférieur de la forme SVG est coupé : </p> <p>La seule façon pour moi de faire en sorte que le conteneur de gauche remplisse l'espace supplémentaire est de créer le conteneur de droite <code>position:absolute</code>, mais cela pose des problèmes avec le formulaire de connexion que je prévois de ajoutez à droite (cela ne semble pas résoudre le problème de couper le tiers inférieur du svg).</p> <p>Existe-t-il un moyen de conserver le conteneur de droite dans le flux de pages, d'afficher 100 % du fichier SVG et de s'assurer que le conteneur de gauche affleure le conteneur de droite ? </p> <p>Modifier : Voici le code SVG : </p> <pre class="brush:php;toolbar:false;"><svg width="708" height="1056" viewBox="0 0 708 1056" fill="none" xmlns=" ;http://www.w3.org/2000/svg"> <clipPath id="sidebar"> <chemin d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z"fill="A"/&g t ; </clipPath> </svg></pre> <p>Voici le composant React jusqu'à présent (comme vous pouvez le voir, les premières étapes de la construction) : </p> <pre class="brush:php;toolbar:false;">const SignUpPage = (props) => retour ( <Conteneur> <LeftContainer> {/* Logo du site et texte marketing, bulles promotionnelles à placer ici. Ce côté devrait être celui à réduire */}. </LeftContainer> <RightContainer flexDirection="colonne" justifier="centre"> {/* Formulaire d'inscription/de connexion à accéder ici */} </RightContainer> </Conteneur> ); }</pré> <p>Modifier 2 : J'ai essayé de mettre en œuvre les solutions indiquées dans les réponses ci-dessous, mais jusqu'à présent, chaque solution présente au moins un problème.À partir de la suggestion de ccprog, j'étais un peu incertain car le code ne semblait pas correspondre à la description de la méthode, mais j'ai essayé de l'implémenter et j'ai obtenu ce résultat : (le code d'abord, puis l'image résultante) </p> <pre class="brush:php;toolbar:false;">const Container = styled(FlexContainer)` hauteur : 523 px ; image d'arrière-plan : gradient linéaire (360 degrés, #FFFFFF 24,95 %, rgba (255, 255, 255, 0) 50,95 %), url ($ {process.env.PUBLIC_URL}/SignUpImage.jpg); position d'arrière-plan : en haut à droite 282 px ; taille de l'arrière-plan : couverture ; répétition d'arrière-plan : pas de répétition ; `; const LeftContainer = style (FlexContainer)` croissance flexible : 1 ; ` const RightContainer = style (FlexContainer)` largeur : 354 px ; background-image: url('data:image/svg+xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg" ;><chemin d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721,768 -5,09917 662,442 7,71089 605,718L144.5 0Z" remplissage ="% 2316979A"/></svg> '); taille de l'arrière-plan : 100 % 100 % ; `</pré> <p>Comme vous pouvez le constater, cela ne remplit pas toute la hauteur de l'écran, même sur le côté droit, et l'image de gauche est vraiment coupée (l'image de gauche est un problème avec toutes les solutions, car vous le ferez voir). </p> <p>Ensuite, j'ai essayé d'implémenter la deuxième solution de Chrwahl. Celle-ci est un peu proche (le côté droit est superbe), mais il y a quelques problèmes avec l'image de gauche : </p> <pre class="brush:php;toolbar:false;">const Container = styled(FlexContainer)` largeur : 100 % ; hauteur : 100vh ; image d'arrière-plan : url (${process.env.PUBLIC_URL}/SignUpBackground.svg), gradient linéaire(360deg, #FFFFFF 24,95%, rgba(255, 255, 255, 0) 50,95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); répétition d'arrière-plan : pas de répétition ; position d'arrière-plan : droite, gauche ; taille d'arrière-plan : contenir, couvrir ; marge inférieure : 5 px ; `;</pré> <p>Je ne sais pas s'il apparaît dans cette image, mais tout le côté gauche de l'écran est vide, donc même si la position est spécifiée comme étant à gauche, l'image ne semble pas commencer par le bord gauche. Le problème avec <code>background-size: 40%, 70%</code> est plus grave : </p>

.container {
    display: flex;
    flex-direction: row;
    justify-items: stretch;
    align-items: stretch;
    height: 523px;
    background-image: linear-gradient(360deg, white, red);
    background-position: top right 282px;
    background-size: cover;
    background-repeat: no-repeat;
}
.container-left {
    flex-grow: 1;
}
.container-right {
    width: 354px;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z" fill="%2316979A"/></svg>');
    background-size: 100% 100%;
}
.child {
  box-sizing: border-box;
  height: 100%;
  margin: 2px;
  border: 2px solid blue;
}

<div class="container">
  <div class="container-left">
    <div class="child"></div>
  </div>
  <div class="container-right">
    <div class="child"></div>
  </div>
</div>

preserveAspectRatio="xMinYMid slice"