htmlで一辺が曲がった矩形を描く方法

-1

htmlで上辺が湾曲した矩形を描くことは可能ですか？シェイプは、フッターに必要なhtmlページの下部に表示する必要があります。htmlで一辺が曲がった矩形を描く方法

2016-11-25 Cooolranjan

この形状のために予想される用途は何ですか？簡単なオプションは、一般的に透明度を持つ画像を使用するだけですが、それを使用しているものによって異なります。（例えば、それは純粋にグラフィカルですか、それとも何かを入れる必要がありますか？）私はおそらくフッターシェイプのイメージを使用します。 – DBS

前の要素http://codepen.io/anon/pen/NbgVZm –

[ダウンロードInkscape]（https://inkscape.org/en/download/）でborder-radiusを使用して遊ぶことができます。あなたのシェイプは、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; 
}

:-)最初のステップを示すべきであるあなたはのhierがある、あなたのニーズに合わせて上位（％）と半径で遊ぶことができますをfiddle：https://jsfiddle.net/tbm2jgbk/

出典

2016-11-25 15:38:15

ありがとう、シェイプ部分以外の部分を透明にレンダリングすることは可能ですか？ .wrapper：.wrapperの背景色で塗りつぶさずに透明にする背景色の前に – Cooolranjan

確かに私は背景を透明にすることは、その使用の代わりに多くを変更しませんbackground-color：白（またはあなたの背景は何でも）.wrapper： before（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で一辺が曲がった矩形を描く方法

答えて

関連する問題