MaxelRus MaxelRus - 4 months ago 10
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

<svg>
and
<polygon>
, putting some content inside with
<foreignObject>
, but positioning in it is awful and
<svg>
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
http://i.stack.imgur.com/EzDSi.png

Answer

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>
</div>

Comments