I might curse CSS on many days but today … I discovered I can do this. I had no idea this was possible. The top red bar is a separate div from the rounded-bottom tab. The black line flows and there's a shadow effect. And the curvature! How'd that happen?! I remember border-radius making much more mundane curves than this!
Brent Schaus
liked this
The bottom div is display: block; width: 10em; margin-left: 450px; border: 1px solid #000; border-top-width: 0; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; text-align: center; box-shadow: 0 2px 3px -2px #000; position: relative; top: -1px;
- Amit Patel
The border radius made a MUCH wider curve than I expected, which was the nice surprise. The black line flows around this shape by using position:relative and shoving the div up to hide the black border under the first div.
- Amit Patel