MaxelRus MaxelRus - 2 months ago 8x
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


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>