And there is an empty div that is the real shape
and this is his css /* The bubble on top */
.menu-border {
position: absolute;
left: 0;
bottom: 99%;
width: 164px;
height: 39px;
/* The magic for the it not being a rectangle */
clip-path: url(#menu);
background-color: var(--bgColorMenu);
}
Yes but I thought your code was related to the article I wrote. I thought you had an issue after using my code but your code is irrelevant to what I am doing here.
<div class="svg-container">
<svg viewBox="0 0 202.9 45.5">
<clipPath id="menu" clipPathUnits="objectBoundingBox"
transform="scale(0.0049285362247413 0.021978021978022)">
<path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
c9.2,3.6,17.6,4.2,23.3,4H6.7z" />
</clipPath>
</svg>
</div>
And there is an empty div that is the real shape
and this is his css
/* The bubble on top */.menu-border {
position: absolute;
left: 0;
bottom: 99%;
width: 164px;
height: 39px;
/* The magic for the it not being a rectangle */
clip-path: url(#menu);
background-color: var(--bgColorMenu);
}
but you are not using the code I am talking about here. It's something different.
I replied with the code in the previous comment , is it what you asking for ?
Yes but I thought your code was related to the article I wrote. I thought you had an issue after using my code but your code is irrelevant to what I am doing here.
Aw so sorry, I just ran into an issue using clip path so found your article and thought you or someone can help me figure it out !
Can u please help ?
better ask your question on StackOverflow, there you can get help. Here no one will see your comment.