Rounded corner on clip-path : polygon

Question

I am experimenting with a navigation bar and currently using a clip-path: polygon for my links. Ideally I would want to round out my top-left corner. I've been searching for a minute, but couldn't come up with anything that works. Any ideas?

Code below:

.menu {
    width: 100%;
    float: right;
    height: 50px;
    clip-path: polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);
    background-color: #1A2434;
}

<div class = "menu"></div>

I have reviewed every answer ,though it wasn't exactly what i wanted, cause so far I've only managed to round out the whole div, but I couldn't find a proper solution, to only round out my top left corner — Giannis Sioutis, Oct 19 '21 at 16:57
It doesn't work in the top left corner, only in the other corners, it was the first thing i tried — Giannis Sioutis, Oct 19 '21 at 17:58

score 0 · Answer 1 · answered Oct 19 '21 at 18:00

0

I did come up with a solution ,which is not ideal, but it works :p

<svg width="1440" height="150" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <rect fill="#000" x="104.99999" y="0" width="614.00001" height="150" id="svg_1" rx="55" stroke="#000"/>
  <rect fill="#000" x="150" width="1290" height="150" id="svg_8" stroke="#000"/>
  <path stroke="#000" id="svg_3" d="m0,150l118.68751,-131.00001l395.62505,0l118.68747,131.00001l-633.00002,0z" fill="#000"/>
 </g>

</svg>

answered Oct 19 '21 at 18:00

Giannis Sioutis

19
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 19 '21 at 18:45

Rounded corner on clip-path : polygon

1 Answers1