Wie erstelle ich eine hybride gerade/gekrümmte Abschnittsgrenze mit SVG oder CSS?
P粉9208354232023-09-02 11:35:13
0
1
765
<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>