Menu with beveled corners

Question

There is a view menu

I tried to make beveled edges through li:nth-child(2n):after li:nth-child(2n):before insert for even li -triangles (through absolute positioning) and in the same way for odd ... but any change in window size and all floating as I understand it is not the best way. Tried through perspective and tranform: rotateX() but how then to tranform: rotateX() with the 1st last element that does not have a bevel ... Tell me how you can implement such a menu ...

that's what I tried

 ul { text-align: center; margin: 0px; display: flex; flex-flow: row wrap; padding-left: 0px; li{ padding: 20px 100px 30px 120px; text-align: center; background-color: #fff; flex: 1 1 100px; margin-left: 50px; box-shadow: 4px -4px 45px rgba(0,0,0,0.5); &:nth-child(2n):after{ width: 0px; height: 0px; border-bottom: 86px solid #fff; border-right: 30px solid rgba(255, 0, 0, 0); position: absolute; top: 0px; content: ""; left: 428px; } &:nth-child(2n):before{ width: 0px; height: 100%; border-bottom: 89px solid #fff; border-left: 35px solid rgba(255, 0, 0, 0); position: absolute; bottom: 0px; content: ""; left: -34px; } &:nth-child(odd):after{ width: 0px; height: 0px; border-top: 90px solid #fff; border-right: 35px solid rgba(255, 0, 0, 0); position: absolute; top: 0px; content: ""; left: 428px; } &:nth-child(odd):before{ width: 0px; height: 0px; border-top: 90px solid #fff; border-left: 32px solid rgba(255, 0, 0, 0); position: absolute; top: 0px; content: ""; left: 929px; } }

html

 <ul> <li><a href="">link<br><span>Boldlink</span></a></li> <li><a href="">link<br><span>Boldlin</span></a></li> <li><a href="">link<br><span>Boldlin</span></a></li> <li><a href="">link<br><span>Boldlink</span></a></li> </ul>

so I put the triangles under a certain width of the screen in its place, but then I could not exclude the 1st and last element correctly (so that they do not display triangles), well, after the slightest resize, all the triangles crawl away who ...

It is interesting to see what and why it floats when the window is resized.

Accepted Answer · 2017-01-06T18:43:12

Added this markup. Its advantages are flexibility and maintainability. If you need to change the angle of the triangle, then change the skew and width for the pseudo-elements.

Solution through pseudo-elements

We assign a triangle for each odd element, and an inverted triangle for the even element. Hiding for the first and last child the corresponding pseudo-elements.

 .menu { display: flex; } .menu__item { padding: 20px; text-align: center; background-color: orange; color: white; position: relative; flex-grow: 1; } .menu__item + .menu__item { margin-left: 60px; } .menu__item:before, .menu__item:after { position: absolute; content: ""; top: 0; background-color: orange; height: 100%; width: 50px; z-index: -1; } .menu__item:before { left: -50px; } .menu__item:nth-child(odd):before { transform: skewX(-30deg) translateX(50%); } .menu__item:nth-child(even):before { transform: skewX(30deg) translateX(50%); } /* Прячем первый псеводоэлемент */ .menu__item:first-child:before { display: none; } .menu__item:after { right: 0; } .menu__item:nth-child(odd):after { transform: skewX(30deg) translateX(50%); } .menu__item:nth-child(even):after { transform: skewX(-30deg) translateX(50%); } /* Прячем последний псеводоэлемент */ .menu__item:last-child:after { display: none; }

 <div class="menu"> <div class="menu__item"> Link </div> <div class="menu__item"> Link </div> <div class="menu__item"> Link </div> <div class="menu__item"> Link </div> </div>

Decision through classes

Solution without pseudo-selectors. We explicitly specify triangles for elements (which form beveled edges) through the classes .menu__item--triangle-before , .menu__item--reversed-triangle-before , .menu__item--triangle-after , .menu__item--reversed-triangle-after . Conveniently, when there is no clear sequence for menu items or a part is hidden, or the order changes (property CSS order ), etc. That is, this solution is more powerful than a solution with pseudo-selectors, but it requires writing more code.

 .menu { display: flex; } .menu__item { padding: 20px; text-align: center; background-color: orange; color: white; position: relative; flex-grow: 1; } .menu__item + .menu__item { margin-left: 60px; } .menu__item--triangle-before:before, .menu__item--reversed-triangle-before:before, .menu__item--triangle-after:after, .menu__item--reversed-triangle-after:after { position: absolute; content: ""; top: 0; background-color: orange; height: 100%; width: 50px; z-index: -1; } .menu__item--triangle-before:before, .menu__item--reversed-triangle-before:before { left: -50px; } .menu__item--triangle-before:before { transform: skewX(-30deg) translateX(50%); } .menu__item--reversed-triangle-before:before { transform: skewX(30deg) translateX(50%); } .menu__item--triangle-after:after, .menu__item--reversed-triangle-after:after { right: 0; } .menu__item--triangle-after:after { transform: skewX(30deg) translateX(50%); } .menu__item--reversed-triangle-after:after { transform: skewX(-30deg) translateX(50%); }

 <div class="menu"> <div class="menu__item menu__item--triangle-after"> Link </div> <div class="menu__item menu__item--reversed-triangle-before menu__item--reversed-triangle-after"> Link </div> <div class="menu__item menu__item--triangle-before menu__item--triangle-after"> Link </div> <div class="menu__item menu__item--reversed-triangle-before"> Link </div> </div>

But I do not display transform: skew (30deg) translateX (50%);
that is, it’s just that I don’t see if it can be affected by the fact that my whole menu block is wrapped in a block with a class on which the background hangs ... when you turn it off, the bevels are still not in place ...
yes no here in this code ... well, I'll figure it out in the code and finish it for myself ... Thank you so much for the help!

Menu with beveled corners

1 answer 1

Solution through pseudo-elements

Decision through classes

More articles: