MaxelRus MaxelRus - 1 year ago 92
CSS Question

Troubles making a custom Navbar

I'm trying to make a website. I'm new in front-end, so sometimes have troubles like that.

The aim is to make a custom navbar, which is a right trapezoid. I've tried to make it through

, putting some content inside with
, but positioning in it is awful and
can't resize in height through percentage.

Is there a way to make something similar to the bar in the photo, or can you help me with svg? Really need your help. Thanks in advance.

There's the photo

Answer Source

You can make a trapezoid as documented here, and with a little positioning, you can put some text over it:

.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download