Wie erstelle ich eine hybride gerade/gekrümmte Abschnittsgrenze mit SVG oder CSS?
<p>Für meine Bewerbung erstelle ich eine Registrierungsseite mit nicht standardmäßigen Abschnittsgrenzen. Was ich erreichen möchte, können Sie hier sehen:
Dies ist kein einfacher Bogen – er besteht aus zwei geraden Linien und einem dazwischen liegenden Bogen. </p>
<p>Soweit ich weiß, ist die Verwendung von SVG der beste Weg, so etwas zu erreichen. Das Problem besteht darin, dass der weiße Bereich ein Bild enthält, das den gesamten Bereich abdeckt. Zu Demonstrationszwecken verwende ich Hellblau. Wenn Sie ein standardmäßiges <code>div</code> mit dem Attribut <code>background-image</code> verwenden, ist die weiße Farbe des SVG undurchsichtig, sodass Sie das folgende Ergebnis erhalten:
</p>
<p>Tipp: Lesen Sie später die Eigenschaften <code>shape-outside</code>, dies ist der neueste Ansatz, den ich ausprobiert habe (beachten Sie, dass ich „reagieren“ verwende). gestaltete Komponenten):</p>
<pre class="brush:php;toolbar:false;">const LeftContainer = styled(FlexContainer)`
Breite: 55 %;
Höhe: 100 %;
Hintergrundfarbe: hellblau;
Z-Index: 1;
/* Hintergrund: linear-gradient(360deg, #FFFFFF 24,95%, rgba(255, 255, 255, 0) 50,95%), url(${process.env.PUBLIC_URL}/TestImage.png);
`;
const RightContainer = styled(FlexContainer)`
Breite: 45 %;
Höhe: 100 %;
/* Hintergrundfarbe: ${colors.secondary600} */
schweben: links;
/* Hintergrundbild: url(${process.env.PUBLIC_URL}/SignUpBackground.svg */
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Hintergrundposition: Mitte;
Position: relativ;
Z-Index: 5;
Clip-Pfad: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar);
`;</pre>
<p>Es gibt immer noch eine Lücke, aber darüber hinaus ist das untere Drittel der SVG-Form abgeschnitten:
</p>
<p>Die einzige Möglichkeit, den linken Container dazu zu bringen, den zusätzlichen Platz auszufüllen, besteht darin, den rechten Container zu <code>position:absolute</code> zu machen. Dies führt jedoch zu Problemen mit dem Anmeldeformular, das ich verwenden möchte rechts hinzufügen (Es scheint das Problem des Abschneidens des unteren Drittels der SVG-Datei nicht zu lösen).</p>
<p>Gibt es eine Möglichkeit, den rechten Container im Seitenfluss beizubehalten, 100 % der SVG-Datei anzuzeigen und sicherzustellen, dass der linke Container bündig mit dem rechten Container abschließt? </p>
<p>Bearbeiten:
Dies ist der SVG-Code: </p>
<pre class="brush:php;toolbar:false;"><svg width="1056" viewBox="fill="none" ;http://www.w3.org/2000/svg">
<clipPath id="sidebar">
<Pfad d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z"fill="A"/> ;
</clipPath>
</svg></pre>
<p>Dies ist die bisherige React-Komponente (wie Sie sehen können, frühe Phasen des Builds): </p>
<pre class="brush:php;toolbar:false;">const SignUpPage = (props) =>
zurückkehren (
<Container>
<LeftContainer>
{/* Website-Logo und Marketingtext, Werbeblasen sollten hierher kommen. */}
</LeftContainer>
<RightContainer flexDirection="column" justify="center">
{/* Anmelde-/Anmeldeformular, um hierher zu gelangen */}
</RightContainer>
</Container>
);
}</pre>
<p>Bearbeiten 2:
Ich habe versucht, die Lösungen in den Antworten unten zu implementieren, aber bisher weist jede Lösung mindestens ein Problem auf.Ausgehend von dem Vorschlag von ccprog war ich etwas unsicher, da der Code nicht mit der Beschreibung der Methode übereinzustimmen schien, aber ich habe versucht, ihn zu implementieren und habe dieses Ergebnis erhalten: (zuerst Code, dann das resultierende Bild) </p>
<pre class="brush:php;toolbar:false;">const Container = styled(FlexContainer)`
Höhe: 523px;
Hintergrundbild: linear-gradient(360deg, #FFFFFF 24,95 %, rgba(255, 255, 255, 0) 50,95 %), url(${process.env.PUBLIC_URL}/SignUpImage.jpg);
Hintergrundposition: oben rechts 282px;
Hintergrundgröße: Cover;
Hintergrundwiederholung: keine Wiederholung;
`;
const LeftContainer = styled(FlexContainer)`
Flexwachstum: 1;
`
const RightContainer = styled(FlexContainer)`
Breite: 354px;
Hintergrundbild: 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" 2316979A"/></svg> ');
Hintergrundgröße: 100 % 100 %;
`</pre>
<p>Wie Sie sehen können, füllt dies nicht die gesamte Höhe des Bildschirms aus, auch nicht auf der rechten Seite, und das linke Bild ist tatsächlich abgeschnitten (das linke Bild ist bei allen Lösungen ein Problem, denn das werden Sie tun). sehen). </p>
<p>Als nächstes habe ich versucht, die zweite Lösung von Chrwahl zu implementieren. Dieses Bild kommt einigermaßen nahe (die rechte Seite sieht großartig aus), aber es gibt einige Probleme mit dem linken Bild: </p>
<pre class="brush:php;toolbar:false;">const Container = styled(FlexContainer)`
Breite: 100 %;
Höhe: 100 Vh;
Hintergrundbild: url(${process.env.PUBLIC_URL}/SignUpBackground.svg),
linear-gradient(360deg, #FFFFFF 24,95 %, rgba(255, 255, 255, 0) 50,95 %), url(${process.env.PUBLIC_URL}/SignUpImage.jpg);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: rechts, links;
Hintergrundgröße: enthalten, abdecken;
Rand unten: 5px;
`;</pre>
<p>Ich bin nicht sicher, ob es in diesem Bild erscheint, aber die gesamte linke Seite des Bildschirms ist leer, sodass das Bild nicht am linken Rand zu beginnen scheint, obwohl die Position als links angegeben ist. Das Problem mit <code>background-size: 40%, 70%</code>
</p>
