欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使用svg或css創建混合的直線/曲線截面邊界？

CSS
傅智翔2年前11瀏覽0評論

對于我的應用程序，我正在創建一個帶有非標準部分邊界的注冊頁面。你可以在這里看到我想要達到的效果:enter image description here這不是一個簡單的弧線，它有兩條直線，中間還有一條弧線。

據我所知，實現這一目標的最佳方式是使用SVG。問題是，那個白色區域將會有一個圖像覆蓋整個東西。出于演示的目的，我將使用淺藍色。如果使用帶有背景圖像屬性的標準div，SVG的白色是不透明的，因此您會得到:enter image description here

我花了幾個小時閱讀了形狀外部和剪輯路徑屬性，這是我嘗試的最新方法(注意我使用的是對樣式化組件的反應):

const LeftContainer = styled(FlexContainer)`
  width: 55%;
  height: 100%;
  background-color: lightblue;
  z-index: 1;
  /* background: linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/TestImage.png); */
`;
const RightContainer = styled(FlexContainer)`
  width: 45%;
  height: 100%;
  /* background-color: ${colors.secondary600}; */
  float: left;
   /* background-image: url(${process.env.PUBLIC_URL}/SignUpBackground.svg); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 5;    
  clip-path: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar);
`;

仍然有一個缺口，但不僅如此，SVG形狀底部的三分之一被切斷了:enter image description here

我能夠讓左側容器填充額外空間的唯一方法是讓右側容器位置:absolute，但是這將導致我計劃添加到右側的登錄表單出現問題(并且它似乎沒有解決刪除svg底部三分之一的問題)。

有沒有一種方法可以讓右邊的容器保持在頁面流中，顯示100%的svg，并確保左邊的容器與右邊的容器齊平？

編輯: 下面是SVG代碼:

<svg width="708" height="1056" viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg">
<clipPath id="sidebar">
<path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z" fill="#16979A"/>
</clipPath>
</svg>

這是目前為止的React組件(如您所見，處于構建的早期階段):

const SignUpPage = (props) => {
  return ( 
    <Container>
      <LeftContainer>
        {/* Site logo and marketing copy, promo bubbles to go here. This side should be the one to shrink */}
      </LeftContainer>
      <RightContainer flexDirection="column" justify="center">
        {/* Signup/Login form to go here */}
      </RightContainer>
    </Container>
   );
}

第二版: 我已經嘗試實現下面答案中的解決方案，但是到目前為止，每個都至少有一個問題。從ccprog的建議開始，我有點不確定，因為代碼似乎與方法的描述不匹配，但是我試圖實現它，并得出了這個結果:(首先是代碼，然后是結果圖像)

const Container = styled(FlexContainer)`  
    height: 523px;
    background-image: linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg);
    background-position: top right 282px;
    background-size: cover;
    background-repeat: no-repeat;
`;

const LeftContainer = styled(FlexContainer)`
    flex-grow: 1;
`
const RightContainer = styled(FlexContainer)`
    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%;
`

enter image description here

正如你所看到的，這實際上并沒有填滿屏幕的整個高度，即使是在右側，左側圖像也確實被切掉了(正如你將看到的，左側圖像在所有解決方案中都是一個問題)。

接下來，我嘗試實施chrwahl的第二個解決方案。這張有點接近(右邊看起來很棒)，但左邊的圖像有一些問題:

const Container = styled(FlexContainer)`
  width: 100%;
  height: 100vh;
  background-image: 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);
  background-repeat: no-repeat;
  background-position: right, left;
  background-size: contain, cover;
  margin-bottom: 5px;
`;

enter image description here

我不確定它是否出現在這個圖像中，但是屏幕的整個左側在這里是空白的，所以看起來圖像不是從左邊緣開始的，即使位置被指定為左。背景尺寸的問題更嚴重:40%，70%:enter image description here

首先是一些術語:讓我們把SVG形狀在頂部和底部覆蓋的區域的寬度稱為& quot右側最小值& quot，中間覆蓋的寬度為& quot右側最大& quot。

按照我對你的問題的理解，右邊區域a)有一個恒定的寬度，b)應該總是顯示完整的SVG形狀。由此得出結論，它必須具有恒定的高度和708 : 1056的縱橫比。這使得計算所需的大小變得容易，最重要的是右側最小值和右側最大值之間的比率是564 : 708。

現在，我建議通過將左側圖像作為背景圖像移動到外部容器元素來解決您的問題，其寬度確保它位于彎曲部分之下，即100%減去564px(或固定分數)。包含促銷內容的左側容器元素的寬度為100%減去708px，右側容器的寬度為708px(或固定分數)。(為簡單起見，容器由與其組件名稱相匹配的類名來標識)

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

您可以將圖像和SVG作為背景放在CSS中。這里有三個不同的例子。首先，我有和你一樣的問題。第二秒總是有效的，但是圖像的一部分被SVG覆蓋并被剪切掉。第三是不同尺寸的測試問題。

現在，我的例子并不能解決問題。這里的要點是:你可以在你的CSS中有更多的背景圖片。請注意，圖像由逗號分隔。背景位置和尺寸中的值的數量必須/可以匹配圖像的數量。配置取決于尺寸、長寬比、圖像質量和圖像的用途。你需要找出什么符合你的情況。

示例中的SVG如下所示(請注意視圖框已經更改):

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 798 1056" 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="#16979A"/>
</svg>

.login {
  width: 400px;
  height: 200px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNzk4IDEwNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNDQuNSAwSDc5OS41VjEwNTZIMTQ0LjVMMjMuNDI1NCA3NzUuMTY5QzAuNDAyNTMzIDcyMS43NjggLTUuMDk5MTcgNjYyLjQ0MiA3LjcxMDg5IDYwNS43MThMMTQ0LjUgMFoiIGZpbGw9IiMxNjk3OUEiLz4KPC9zdmc+Cgo='),
  url('https://via.placeholder.com/800x600');
  background-repeat: no-repeat;
  background-position: right, left;
  margin-bottom: 5px;
}

.size1 {
  background-size: contain, contain;
}

.size2 {
  background-size: contain, cover;
}

.size3 {
  background-size: 40%, 70%;
}

<div class="login size1"></div>
<div class="login size2"></div>
<div class="login size3"></div>