Как сделать выемку в меню под логотип?

230

12 июня 2018, 02:10

Как можно сделать прозрачным участок меню вокруг логотипа.

Думала как-то clip-path применить, но что-то не то получается. Была бы фоновая картинка однотонной, нарисовала бы просто обводку в PhotoShop, но фон фоткой идет, так что обводка будет некрасиво выделяться.

Подскажите решение, пожалуйста! C помощью CSS или svg, или еще как-нибудь.

Answer 1

Руки оторвать этому вашему 'Дизайнеру'

Второй вариант : https://codepen.io/topicstarter/pen/KRjLbK

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" id="svg8" viewBox="0 0 2561 237"> 
  <g id="layer1" transform="translate(2264 -91)"> 
    <g id="g1068"> 
      <path id="path819" stroke-width=".26499999" d="M298 91L-2 328"/> 
      <path id="path827" fill="none" stroke-width=".26458332px" d="M38 110a401 401 0 0 1 5 1 49031 49031 0 0 1 4 1h1a33 33 0 0 1 2 0 400 400 0 0 1 5 1 127 127 0 0 1 2 0h1v1a32 32 0 0 1 2 0 3999 3999 0 0 1 7 2 1623 1623 0 0 1 9 2 403 403 0 0 1 3 1 1712 1712 0 0 1 5 2 127 127 0 0 1 3 0 567 567 0 0 1 5 1 566 566 0 0 1 5 1l1 1h2l1 1a794 794 0 0 1 6 0 3980 3980 0 0 1 8 2 1619 1619 0 0 1 9 1h1a33 33 0 0 1 3 0 400 400 0 0 1 5 1 840 840 0 0 1 8 1v1h2a571 571 0 0 1 4 0 404 404 0 0 1 3 1 508 508 0 0 1 7 0 404 404 0 0 1 4 1 1677 1677 0 0 1 5 1 794 794 0 0 1 6 0 403 403 0 0 1 3 1 572 572 0 0 1 5 1 403 403 0 0 1 5 1 568 568 0 0 1 5 1 1874 1874 0 0 1 7 2l5 2a400 400 0 0 1 3 1 24352 24352 0 0 1 2 0 286 286 0 0 1 5 0l1 1 1 1h2a401 401 0 0 1 3 1 118 118 0 0 1 3 0l1 2h2a404 404 0 0 1 3 1 3364 3364 0 0 1 19 2l1 1h2a569 569 0 0 1 9 0 508 508 0 0 1 7 0l-1 1h-3a508 508 0 0 0-9 0h-1a570 570 0 0 0-4-1l-1-1h-2a1143 1143 0 0 0-8 0l-3-1a3366 3366 0 0 0-7-1h-1a404 404 0 0 0-3-1l-2-1h-2l-1-1a402 402 0 0 0-4-1l-1-1h-1a272 272 0 0 0-6 0l-1-1h-2l-1-1a2766 2766 0 0 0-6-1l-2-1a1866 1866 0 0 0-6-2h-1-2l-4-1-1-1h-3a567 567 0 0 0-4-1 402 402 0 0 0-3 0h-7a1687 1687 0 0 0-3-2h-1-1a402 402 0 0 0-2-1h-7-1a404 404 0 0 0-3 0 566 566 0 0 0-4-1v-1h-2-1-2a841 841 0 0 0-7-1 402 402 0 0 0-3 0h-1l-1-1h-5a1618 1618 0 0 0-7-1l-5-2h-6l-1-1h-2l-1-1h-3a567 567 0 0 0-4 0h-1a568 568 0 0 0-4-1h-1v-1h-1-2a1686 1686 0 0 0-3-2 402 402 0 0 0-3 0h-2-1a404 404 0 0 0-7-3 3984 3984 0 0 0-6-2h-1-1v-1h-6a400 400 0 0 0-3 0 48763 48763 0 0 1-2-1h-2l-1-1h-1-2-1l-1-1z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" white-space="normal"/> 
      <g id="g1043" fill="red" stroke-width=".26458332px" transform="matrix(5.00277 0 0 4.85417 9980 -371)"> 
        <path id="path1011" d="M-2398 140l10-6c11-4 24-6 28 4l2 6h-7c-2-12-13-12-22-9l-11 5"/> 
        <path id="path1020" d="M-2404 141l-4-4c1-3 11-7 11-7 13-5 34-11 38 7-4-11-16-13-43 3"/> 
      </g> 
      <g id="g1059" transform="translate(-4 425)"> 
        <path id="path1029" fill="red" stroke-width="1.44479847px" d="M-325-117l626 1-1-213-2559 3v211l104 1 52-1c102-93 250-157 327-1h48l1403-1"/> 
      </g> 
    </g> 
  </g> 
</svg>