Как сделать такое главное меню? (Wordpress)

288

07 мая 2018, 21:17

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

Answer 1

Можно использовать изображение с куском волны и применить это изображение как фон меню с повторением по координате-x;
```
background: url('волна.png') left top repeat-x;
```
в качестве изображения можно использовать svg, но тогда необходимо будет указать background-size.

Можно использовать svg pattern

html,body{margin:0;padding:0;} 
div{ 
  background: url('https://i.imgur.com/S1DAySp.jpg'); 
  background-size:cover; 
  overflow:hidden; 
} 
 
svg{ 
  display:block; 
}

<div> 
  <svg viewbox="0 0 100 10"> 
    <pattern x="1" id="waves" patternUnits="userSpaceOnUse" width="10" height="10"> 
      <path fill="#FFFFFF" d="M10,0v5C8.3,6.7,6.7,6.7,5,5S1.7,3.3,0,5l0-5"/> 
    </pattern> 
    <rect x="0" y="0" width="100" height="10" fill="url(#waves)"/> 
  </svg> 
  <p>контент</p> 
  <p>контент</p> 
  <p>контент</p> 
  <p>контент</p> 
  <p>контент</p> 
</div>