Сбой в создании пользовательского Navbar

Question

Я пытаюсь создать сайт. Я новичок в интерфейсе, поэтому иногда возникают проблемы.

Целью является создание пользовательского навигатора, который является правильной трапецией. Я пытался сделать это через <svg> и <polygon>, помещая некоторый контент внутрь с <foreignObject>, но позиционирование в нем ужасно и <svg> не может изменять размер в процентах.

Есть ли способ сделать что-то похожее на панель на фотографии, или вы можете помочь мне с svg? На самом деле нужна ваша помощь. Заранее спасибо.

Там в ФОТОСНИМКЕ http://i.stack.imgur.com/EzDSi.png

Answer 1

Трапеция может быть сделана с помощью блочного элемента с нулевой высоты (высота 0px), шириной больше нуля и границами, что прозрачна, за исключением одной стороны.

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

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