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:
NOTE: I need to do only with HTML and CSS, thank you. And ignore the numbers inside the blue square.
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.
@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:
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.
https://answall.com/questions/48152/css-div-diagonal
– Bsalvo