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.
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>
Doing the only leaning part with HTML and CSS can lead to clutter that:
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.