-1

How can I dump this design into CSS?

the design here

thanks in advance!!!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Emre Solmaz
  • 11
  • 1
  • Is your goal to recreate only the wavy, purple bar part of the screenshot? – logz11 Aug 13 '22 at 20:09
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Aug 15 '22 at 13:30

1 Answers1

-2

That seems like it's just a mockup made in a software like Figma or Illustrator, it would be very hard to achieve something that looks exactly like that on the web.

I'd recommend just using a normal nav-bar instead of that, since it's easier to maintain and its better accessibility-wise.

If you REALLY want to make something similar, you'd probably need to use an SVG and flexbox/tables, there are multiple SVG wave generators out there.

(Also, make sure to read the SO post guidelines. Your post falls into the many "Don't do's" listed.)

Here's an example of what I'm talking about:

.buttonContainer {
  width: 350px; /* Width of the bar */
  height: 44px; /* Height of the bar */
  line-height: 44px; /* Set this to the save value as above */
  
  color: #000; /* Color of your text/icons */
  background-image: url("https://svgshare.com/i/k3K.svg"); /* This is where you'll add your SVG image */
  
  background-size: auto auto;
  display: table;
}

.buttonContainer > ul {
    display: table-row;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.buttonContainer > ul > li {
    display: table-cell;
}
<div class="buttonContainer">
  <ul>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
  </ul>
</div>
Jax
  • 41
  • 6