How to make menu with different drawing?

Asked

Viewed 195 times

2

Good stack galley I need to do this menu that is in wireframe, but I do not know which commands I use to leave the line diagonal. Follow the image below:

Wireframe

NOTE: I need to do only with HTML and CSS, thank you. And ignore the numbers inside the blue square.

html css
  • 1

    https://answall.com/questions/48152/css-div-diagonal

2 answers

3

Following example could get this result:

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  width: 100%;
}

.menu li {
  display: inline-block;
  padding: 15px;
  position: relative;
  padding-left: 80px;
  background-color: #d3d3d3;
  overflow:hidden;
}

.menu li:before {
  display: block;
  content: " ";
  width: 50px;
  position: absolute;
  left: -70px;
  top: 0px;
  height: 100%;
  transform: rotate(-45deg);
  box-sizing: border-box;
  border-left: 150px solid #fff;
  border-right: rgba(0, 0, 0, 0);
  border-top: rgba(0, 0, 0, 0);
  border-bottom: rgba(0, 0, 0, 0);
}

.menu li:not(:first-child) {
  margin-left: 15px;
}
<ul class="menu">
  <li>Menu 01</li>
  <li>Menu 02</li>
  <li>Menu 03</li>
</ul>

  • And in case I want to keep a fixed width(size)? Because when I put text of different sizes inside it ends up adjusting itself and increasing the size of the box.

  • 1

    @Lonetonberry, you just give one width fixed to the .menu li as it will break if the internal text is too large.

1

Doing the inclined part only with HTML and CSS can lead to the gambiarras that:

  • will come back to haunt you when you have to maintain;
  • will give trouble to stay minimally nonoffensive to the eyes on all types of screens and devices.

I think for a simple case of this is no problem - it is even recommended - use images to make the inclined part of the tabs.

Just do something like:

<tag>Item de menu</tag>

Where tag is the type element you find best (div, li etc.)

And fill in the attributes min-width, margin, padding, text-align, background-color and background-image da li to your liking.

Hence you use a . gif or . png as the background image aligned to the left of the element, and gives a background of the same color.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.