国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Wie erstelle ich eine hybride gerade/gekrümmte Abschnittsgrenze mit SVG oder CSS?
P粉920835423
P粉920835423 2023-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>
P粉920835423
P粉920835423

Antworte allen(1)
P粉704066087

首先介紹一些術(shù)語:我們將 SVG 形狀頂部和底部覆蓋的區(qū)域的寬度稱為“右側(cè)最小值”,將中間覆蓋的寬度稱為“右側(cè)最大值”。

我理解你的問題的方式是,右側(cè)區(qū)域 a) 具有恒定的寬度,b) 應(yīng)始終顯示完整的 SVG 形狀。由此可見,它必須具有恒定的高度和 708 : 1056 的縱橫比。這樣可以輕松計(jì)算所需的尺寸,最重要的是右側(cè)最小值與右側(cè)最小值之間的比率右側(cè)最大值為 564 : 708。

現(xiàn)在,我建議通過將左側(cè)圖像作為背景圖像移動(dòng)到外部容器元素來解決您的問題,其寬度確保它位于彎曲部分下方,即。 e. 100% 減去 564px(或固定分?jǐn)?shù))。包含促銷內(nèi)容的左側(cè)容器元素的寬度為 100% 減去 708px,右側(cè)容器的寬度為 708px(或固定分?jǐn)?shù))。 (為簡單起見,容器通過與其組件名稱匹配的類名稱來標(biāo)識)

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

您可以使用其他 px 大小值,只要保持它們之間的比例即可。

如果您不想想要顯示完整的 SVG,而只想確保左側(cè)的曲線保持完全可見,請將以下屬性添加到根 代碼> 元素:

preserveAspectRatio="xMinYMid slice"

當(dāng)改變右側(cè)容器的縱橫比時(shí),這將具有與 CSS cover 相同的效果,而且 viewBox 的區(qū)域始終與左邊。僅當(dāng)縱橫比相對于寬度移動(dòng)到更高的高度時(shí),這才有效。如果縱橫比寬度增加,曲線的相同部分將在頂部和底部被切除 - 但另一種選擇是它的寬度不足以覆蓋右側(cè)。

如果你走這條路,請記住,如果你提前設(shè)置了固定的高度,你只能知道最大和最小右側(cè)之間區(qū)域的寬度。 CSS 無法使用元素的高度來計(jì)算寬度值。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage