製作自定義導航欄的麻煩

Question

我正在嘗試製作一個網站。我是前端新手，所以有時會遇到類似的問題。

目標是製作一個自定義導航欄，這是一個正確的梯形。我試圖通過<svg>和<polygon>，其中一些內容與<foreignObject>，但定位在它是可怕的，<svg>無法調整高度通過百分比。

有沒有一種方法可以製作類似於照片中的酒吧，或者您可以幫我使用svg嗎？真的需要你的幫助。提前致謝。

有照片 http://i.stack.imgur.com/EzDSi.png

Answer 1

梯形可以由塊元件具有零高度（0像素的高度），寬度大於零和邊界製成，那除一面以外透明。

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

嘗試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); 
}