制作自定义导航栏的麻烦

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