Help please create such a shape and circle it as shown in the screenshot. Thanks a lot in advance. enter image description here

  • and the complex figure is that of all this? - user33274
  • So let's say a mega menu. Updated the screenshot, look again please. - Samvel Harutyunyan

1 answer 1

The answer within the screenshot

watch full screen

* { margin: 0; padding: 0; box-sizing: border-box; } body { text-align: center; } .wrapper { display: inline-block; border: 1px solid blue; position: relative; height: 155px; margin-top: 10px; } .items { display: flex; justify-content: flex-start; padding: 4px; } .item { width: 150px; height: 145px; background: red; border: 1px solid #fff; } .elem { width: 120px; height: 30px; background: #fff; border: 1px solid blue; border-top: none; float: right; text-align: center; margin-right: -1px; } .elem button { display: block; width: 90%; height: 90%; margin: auto; } .wrapper:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid blue; border-bottom: 10px solid transparent; border-top: 10px solid transparent; position: absolute; left: -20px; top: 50px; z-index: 9; } .wrapper:before { content: ""; border-left: 8px solid transparent; border-right: 8px solid #fff; border-bottom: 8px solid transparent; border-top: 8px solid transparent; position: absolute; left: -16px; top: 52px; z-index: 10; } 
 <div class="wrapper"> <div class="items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="elem"> <button>тарабарщина</button> </div> </div>

  • deleted. thanks a lot, saw - Samvel Harutyunyan
  • I did already - is not it ?? - user33274 5:19 pm