カスタムNavbarを作成する際のトラブル

Question

私はウェブサイトを作ろうとしています。私はフロントエンドで新しく、時にはそのような問題を抱えています。

目的は、正しい台形のカスタムナビゲーションバーを作成することです。 <svg>と<polygon>で内容を入れようとしましたが、位置は<foreignObject>ですが、その位置はひどく、<svg>のパーセンテージではサイズを変更できません。

写真のバーと似たようなものを作る方法はありますか、またはsvgを手伝ってもらえますか？本当にあなたの助けが必要です。前もって感謝します。

写真 http://i.stack.imgur.com/EzDSi.png

Answer 1

を試してみてくださいあります片側を除いて透明です。

HTML：

<div class="trapezoid"></div> 

はCSS：

.trapezoid { 
    width: 50px; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid black; 
} 

と少しのポジショニングで、あなたはそれの上にいくつかのテキストを置くことができます。

.menu { 
 
    position: relative; 
 
} 
 
.background { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100px; 
 
    height: 0; 
 
    border-right: 60px solid transparent; 
 
    border-top: 200px solid #346; 
 
} 
 
.items { 
 
    position: absolute; 
 
    top: 0; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<div class="menu"> 
 
    <div class="background"></div> 
 
    <div class="items">Item One<br>Item Two<br>Item Three</div> 
 
</div>

Answer 2

は台形が、幅がゼロよりも大きいとの国境、高さゼロ（0PXの高さ）とのブロック要素によって作られたということができるBackground Shape Customizer

.parallelogram { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    width: 150px; 
    height: 100px; 
    bottom: 0; 
    margin: -149px; 
    padding: 15% 24% 43% 14%; 
    border: none; 
    font: normal 100%/normal Arial, Helvetica, sans-serif; 
    color: rgba(0,0,0,1); 
    -o-text-overflow: clip; 
    text-overflow: clip; 
    background: #00354D; 
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
}