I am currently working on creating html + css tabs with a unique design. The goal is to have the selected tab display the title connected to the tab content, with a "neck" rounding in like an arrow.
After some progress, I have reached a point where the image attached shows a div connecting the title and content tab. However, the issue I am facing is that the corners are not rounded due to the structure of two separate divs being connected.
I believe there must be a better way to achieve this desired look. How can I accomplish this design using html? Please refer to the following link for reference: https://i.sstatic.net/sRJYd.png