Comment créer une limite de section hybride droite/incurvée en utilisant SVG ou CSS ?

Question

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.

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 div standard avec l'attribut background-image, la couleur blanche du SVG est opaque, vous obtenez donc le résultat suivant :

Conseil, lisez plus tard les propriétés shape-outside et clip-path composants stylisés ):

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>

Voici le composant React jusqu'à présent (comme vous pouvez le voir, les premières étapes de la construction) :

const SignUpPage = (props) =>
  retour (
    
      
        {/* Logo du site et texte marketing, bulles promotionnelles à placer ici. Ce côté devrait être celui à réduire */}.
      
      
        {/* Formulaire d'inscription/de connexion à accéder ici */}
      
    
   );
}
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) 
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, ');
    taille de l'arrière-plan : 100 % 100 % ;
`

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). 
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 : 
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 ;
`;

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 background-size: 40%, 70% est plus grave :

Answer 1

Tout d'abord un peu de terminologie : nous appelons la largeur de la zone couverte par le haut et le bas d'une forme SVG la "right min", et la largeur couverte au milieu la "right max".

La façon dont je comprends votre question est que la zone de droite a) a une largeur constante et b) doit toujours afficher la forme SVG complète. Il s'ensuit qu'il doit avoir une hauteur constante et un rapport hauteur/largeur de 708 : 1056. Cela facilite le calcul des dimensions requises, le plus important étant le rapport entre le minimum à droite et le maximum à droite est de 564 : 708.

Maintenant, je suggère de résoudre votre problème en déplaçant l'image de gauche comme image d'arrière-plan vers un élément de conteneur externe avec une largeur qui garantit qu'elle se trouve en dessous de la partie incurvée, c'est-à-dire. e. 100 % moins 564 px (ou fraction fixe). L'élément conteneur de gauche contenant le contenu promotionnel a une largeur de 100 % moins 708 px, et le conteneur de droite a une largeur de 708 px (ou une fraction fixe). (Pour plus de simplicité, les conteneurs sont identifiés par des noms de classe qui correspondent aux noms de leurs composants)

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

Vous pouvez utiliser d'autres valeurs de taille px tant que vous conservez la proportion entre elles.

Si vous ne souhaitez pas afficher le SVG complet, mais souhaitez simplement vous assurer que la courbe de gauche reste entièrement visible, ajoutez l'attribut suivant à l'élément racine

preserveAspectRatio="xMinYMid slice"

Cela aura le même effet que CSS cover 相同的效果，而且 viewBoxcover lors de la modification des proportions du conteneur de droite, et la zone de la

viewBox sera toujours la même que celle de gauche. Cela ne fonctionne que si le rapport hauteur/largeur est déplacé vers une hauteur plus élevée par rapport à la largeur. Si la largeur du rapport hauteur/largeur est augmentée, la même partie de la courbe sera coupée en haut et en bas, mais l'alternative est qu'elle n'est pas assez large pour couvrir le côté droit.

Si vous suivez cette voie, n'oubliez pas que si vous définissez une hauteur fixe à l'avance, vous ne connaissez que la largeur de la zone entre les côtés droits maximum et minimum. CSS ne peut pas utiliser la hauteur d'un élément pour calculer une valeur de largeur. 🎜