http://prntscr.com/bbah3c
Questions on the picture?

  1. How to cut a wavy line
  2. Placing diva "Personal Cabinet" in the top black diva block, and div "Hider" with fish stumbles from above, used negative margins for diva "Hider", did not help ...
  3. I give the code

.top_top_menu_wrap{ /*width: 960px;*/ width: 1020px; margin:0 auto; } .my_room{ width:155px; height:30px; background-color:#00963d; float:right; } .header{ height:185px;/*160px*/ background:url('../img/fish_header.jpg') no-repeat 100% 0% ; width:1020px; z-index: 5; position: relative; } 
 <div class="top_top_menu_wrap"> <div class="my_room"> <img src="/bitrix/templates/main2/img/person.png" alt="person"> <span> <a class="email" href="/personal/">Личный кабинет</a> </span> </div> </div> <div class="header"> </div>

  • in ancient times, my grandfather did through png you cut a piece with triangles you throw a block and it has a background, the repit will do its job, but now with a wave of ways - Serge Esmanovich

1 answer 1

  1. Use CSS clip-path property. Not supported by all browsers, read about support here . You can also overlay a repeating image, but the clip-path is preferred. You can make a banner immediately with triangles on top. Can be done using SVG. As they say, the taste and color. Still, it is preferable, again, the clip-path, which was created specifically for this.
  2. Using negative margins is generally a bad practice. The essence of the question is not entirely clear. What are the black blocks? Which div is "header"? You either lay out the code, or explain more precisely what is required, please.

As I understand it, you can’t place the basket and the balance on the top right of the fish. You can simply not merge your personal account with the header, then it will "go beyond" its limits. Of course, not everything is so simple, there will still be a lot to play with. But I don't even have a code to help you. Therefore, the details in the studio.

  • Please add the code and I will correct my answer. - smellyshovel
  • C'mon, using negative margins is not a bad practice if you use them where you really need it :) - MasterAlex
  • @MasterAlex Here it is definitely not necessary. It makes no sense to place a block inside another block, in order to "reflect" it later with -margin'ov. - smellyshovel
  • one
    Well, yes, without a code, it’s impossible to understand what the author wants to do, but in this case the negative margins are definitely not needed. - MasterAlex
  • "You can make a banner right away with triangles on top. You can do it with SVG" - What is it like? I will fold the code later, if I do not understand it, it is not at hand ... - NNN