How to make menu with different drawing?

Question

How to make menu with different drawing?

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I do not know what to do, but I do not know which commands I use to leave the line diagonally. Follow the image below:

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

html css

asked by anonymous 27.06.2017 / 18:14

2 answers

String for KeyValuePair using LINQ Retrieve text from li and pass to PHP

score 3 · Answer 1

Here is an example that 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>

score 1 · Answer 2

Doing the only leaning part with HTML and CSS can lead to clutter that:

will come back to haunt you when you have to do maintenance;
will work to be minimally non-offensive to the eyes on all types of screens and devices.

I think for a simple case of this is not a problem - it is even recommendable - use images to make the sloping part of the flaps.

Just do something like this:

<tag>Item de menu</tag>

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

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

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