Theo's Typesafe Cult•2y ago

Active Bottom Tab Rounding.

I would like to round the corners in a way like this this code does for the middle tab, when that tab is active, however would I switch out the round at the bottom with code. I feel like I am overthinking how I should approach this.

'use client';

import React from 'react';
import Table from '../(components)/table';
import Link from 'next/link'


function RequestCreatePage() {
    return (
        <>

            <div className="card grid bg-info    my-3 shadow-xl">
                <div className='card-header'>
                    <div className="tabs tab-secondary">
                        <div className='bg-secondary rounded-t-lg'>
                            <a className="tab tab-lg bg-primary tab-lifted  text-white rounded-br-lg border-hidden    ">Large</a>
                        </div>
                        <a className="tab tab-lg bg-secondary tab-lifted text-white border-none">Large</a>
                        <div className='bg-secondary rounded-t-lg'>
                            <a className="tab tab-lg bg-primary tab-lifted text-white rounded-bl-lg border-none">Large</a>
                        </div>
                    </div>
                    <div className="w-full h-4 bg-secondary">

                    </div>
                </div>
            </div>
        </>

    );
}

export default RequestCreatePage`

'use client';

import React from 'react';
import Table from '../(components)/table';
import Link from 'next/link'


function RequestCreatePage() {
    return (
        <>

            <div className="card grid bg-info    my-3 shadow-xl">
                <div className='card-header'>
                    <div className="tabs tab-secondary">
                        <div className='bg-secondary rounded-t-lg'>
                            <a className="tab tab-lg bg-primary tab-lifted  text-white rounded-br-lg border-hidden    ">Large</a>
                        </div>
                        <a className="tab tab-lg bg-secondary tab-lifted text-white border-none">Large</a>
                        <div className='bg-secondary rounded-t-lg'>
                            <a className="tab tab-lg bg-primary tab-lifted text-white rounded-bl-lg border-none">Large</a>
                        </div>
                    </div>
                    <div className="w-full h-4 bg-secondary">

                    </div>
                </div>
            </div>
        </>

    );
}

export default RequestCreatePage`

22 Replies

Valhalaar•2y ago

Not sure I understand the question. What are you trying to change about the active tab?

Gabool•2y ago

So on the bottom left and right of it, see how the inactive tabs are rounded so that it looks like one bar. I am having trouble thinking of how to do that as you click through the tabs

Gabool•2y ago

Gabool•2y ago

With that if lets the the right most tab is active then the middle tab bottom right border would be rounded and the div colored to the same thing as the blue bar.

Gabool•2y ago

So you don't have that gap

Valhalaar•2y ago

oh I see

Gabool•2y ago

almost like an inverted radius lol ::before, ::after?

Unknown User•2y ago

Message Not Public

Valhalaar•2y ago

I think you can achieve it with a background color oh whoops arcanist beat me to it 😄 was playing in a codepen arcanist's suggestion is better than mine because mine messes up with the top border radii

Valhalaar•2y ago

https://codepen.io/jhnance/pen/MWBWyRO you can see here the background peeks out between the top borders

jhnance

CodePen

MWBWyRO

...

Gabool•2y ago

May you elaborate?

Valhalaar•2y ago

So like instead of the bottom border from my codepen you could just make a div whose background color matches the color of the active tab and move it partially underneath the tabs so that it covers the gaps made by the bottom rounded corners and still sticks out some underneath all the tabs

Unknown User•2y ago

Message Not Public

Valhalaar•2y ago

Nice 😊

Gabool•2y ago

The top is a little messed up then That's actually what I did there My problem is changing it when a new tab is selected

Unknown User•2y ago

Message Not Public

Gabool•2y ago

The ones next to it would have to change

Ambushfall•2y ago

Use the ::before and ::after selectors and manipulate the elements in that way. There's a bunch of google examples for this issue you're mentioning, did you look through them?

Gabool•2y ago

I am definitely struggling, just stepped away from my computer, but tried converting this into tailwind

Gabool•2y ago

https://blog.logrocket.com/how-to-create-fancy-corners-in-css/

Supun Kavinda

LogRocket Blog

How to create fancy corners with CSS - LogRocket Blog

You can create all kinds of snazzy corners — rounded, random, and everything in between — using only border-radius, box-shadow, and pseudo-elements.

Gabool•2y ago

And it looks like everything but that lol

                        <a className="tab tab-lg bg-primary tab-lifted text-white border-none relative before:content-[''] before:absolute before:-bottom-0 before:-left-3 before:w-3 before:h-3 before:rounded-br-lg before:shadow-right-inverted-corner">Large</a>

                        <a className="tab tab-lg bg-primary tab-lifted text-white border-none relative before:content-[''] before:absolute before:-bottom-0 before:-left-3 before:w-3 before:h-3 before:rounded-br-lg before:shadow-right-inverted-corner">Large</a>

Figured it out for the right bottom side with this added to tailwind config

  theme: {
    extend: {
      boxShadow: {
        'right-inverted-corner': '6px 0 0 0 #1e3859',
      }
    },
  },

  theme: {
    extend: {
      boxShadow: {
        'right-inverted-corner': '6px 0 0 0 #1e3859',
      }
    },
  },

Gaming

Programming

Active Bottom Tab Rounding.