picture

Tell me how to create such a design?

  • using css and html. Show how you tried to solve the problem (show your code) and specify what exactly the problem is with you. - Alex
  • I do this for the first time while it is difficult! And what do you advise? - user22977
  • learn the basics of layout of a multi-level menu and how to make the background of the block a picture. You have not called a real problem . difficult to solve is not a problem. - Alex
  • the problem is that I don’t know how to put these diagonal corners - user22977
  • one
    Look at the discussions on this site: - text at an angle - a slanted background - other questions about the background - Gleb Kemarsky

2 answers 2

In general, it works, but more attentively with magic numbers.
How best to do (if without svg), I do not know.

html, body { height: 100%; margin: 0; line-height: 2em; } body { background: linear-gradient( 116deg, black 0, black 18.5em, antiquewhite 18.5em, antiquewhite 31em, white 31em, white 35em, silver 35em, silver 100% ); padding-left: 5em; position: relative; z-index: 0; } .categories, .subcategories { float: left; margin: 1em; width: 10em; } .categories a, .subcategories a { color: inherit; display: inline-block; text-decoration: none; } .categories { color: white; } .subcategories { padding-left: 5em; /* надо знать число элементов */ } .subcategories div { margin-left: -1em; } .categories .active { color: black; } .categories .active:before { content: ""; position: absolute; left: 0; width: 21em; height: 2em; z-index: -1; background: antiquewhite; } 
 <div class=categories> <div><a href=#>Категория один</a></div> <div><a href=#>Категория два</a></div> <div class=active><a>Категория три</a></div> <div><a href=#>Категория четыре</a></div> <div><a href=#>Категория пять</a></div> </div> <div class=subcategories> <div><a href=#>Подкатегория один</a> <div><a href=#>Подкатегория два</a> <div><a href=#>Подкатегория три</a> <div><a href=#>Подкатегория четыре</a> <div><a href=#>Подкатегория пять</a> </div></div></div></div></div> </div>

  • And from an amateur put minuses I would like to see his decision. - Qwertiy ♦

Clip-path if fast, but there are a lot of pitfalls, there will be a load with drawing. Better svg

  • one
    Please try to leave a little more detailed answers. - aleksandr barakin
  • clip-path cuts the visual representation of the shape. It does not help to change the alignment of the text. - Qwertiy ♦