如何繪製在html中彎曲的一側的矩形

-1

是否可以在html中繪製彎曲的矩形？形狀應顯示在html頁面的底部，因爲它需要頁腳。如何繪製在html中彎曲的一側的矩形

2016-11-25 Cooolranjan

，這是什麼形狀的預期使用？簡單的選項通常只是使用具有透明度的圖像，但這取決於您使用的圖像。（例如，它是純粹的圖形，還是你需要把東西放在它？）我可能會使用圖像的腳註形狀。 – DBS

你可以在上一個元素上使用border-radius http://codepen.io/anon/pen/NbgVZm –

[下載Inkscape]（https://inkscape.org/en/download/）並且玩一玩。你的形狀在svg中應該沒有任何問題。 – enhzflep

試試這個：本應顯示的第一個步驟僅:-)

.wrapper { 
    width: 500px; 
    height: 200px; 
    border: 1px solid black; 
    border-top: none; 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
} 

.wrapper:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 80%; 
    border: 1px solid black; 
    left: 0; 
    top: -50%; 
    z-index: 2; 
}

你可以玩的頂部（％）和半徑，以滿足您的需求票數是小提琴：https://jsfiddle.net/tbm2jgbk/

來源

2016-11-25 15:38:15

謝謝，是否有可能渲染左部分，即形狀部分以外的部分是透明的？ .wrapper：之前背景顏色透明，沒有得到填充.wrapper背景顏色 – Cooolranjan

當然，但我背景透明不會改變很多，而不是使用背景顏色：白色（或無論你的背景是什麼）.wrapper：之前（hier：https：//jsfiddle.net/tbm2jgbk/1/） –

您可以使用SVG作爲分隔符。

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
main { 
 
    flex: 3; 
 
    background-color: purple; 
 
    fill: purple; /* Color svg separator will inherit from */ 
 
    position: relative; 
 
} 
 
svg { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 100%; 
 
    fill: inherit; 
 
} 
 
footer { 
 
    flex: 1; 
 
    padding-top: 50px; /* svg separator height */ 
 
    background-color: gold; 
 
}

<main> 
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
    <path d="M0 0 C 50 100 50 100 100 0 Z"></path> 
 
    </svg> 
 
</main> 
 
<footer></footer>

來源

2016-11-25 15:49:41 Ricky

如何繪製在html中彎曲的一側的矩形

回答

相關問題