CODEWITHSUNDEEP
htmljquerycssbootstrap-4
Rnue
Rnue

Reputation: 105

CSS triangle custom border color not working

I have created a custom triangle using CSS so that when the user hovers the mouse over the element, it displays a box that has an arrow pointing below. I applied a white border to it, but it does not work for the arrow.

Below is my CSS

#guidedHomebuyerDashboard .orientationStep:hover .fancyTooltip {
        display: block;
    }

    #guidedHomebuyerDashboard .fancyTooltip {
        display: none;
        position: absolute;
        left: 0px;
        top: -70px;
        width: 215px;
        height: 60px;
        box-shadow: 0px 0px 10px 8px rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        background-color: #047a4c;
        align-content: center;
        animation: driftUp .5s ease-out;
        border-color: white;
        border-width: 1px;
        border-style: solid;
    }

    #guidedHomebuyerDashboard .orientationStep.active .fancyTooltip {
        background-color: #526993;
    }

    #guidedHomebuyerDashboard .fancyTooltip:after {
        content: '';
        position: absolute;
        bottom: 0px;
        right: 50%;
        transform: rotate(-180deg) translateX(-50%) translateY(-100%);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid white;
        border-color: transparent transparent #047a4c transparent;
        filter: drop-shadow(2px 0 0 white) drop-shadow(0 .5px 0 #CAD5E0);
    }

    #guidedHomebuyerDashboard .orientationStep.active .fancyTooltip:after {
        border-color: transparent transparent #526993 transparent;
        filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
    }

[![enter image description here][1]][1]

Upvotes: 0

Views: 224

Answers (1)

cheesyMan
cheesyMan

Reputation: 1510

I would say that you're messing up a bit your border rules :).

What you see is NOT a box without borders, but the borders itself (8px is a huge border). In fact, the :after tooltip box has no dimensions set.

Try these rule for the pseudo :after

#guidedHomebuyerDashboard .fancyTooltip:after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: 50%;
    width: 8px; /* set dimensions for the tooltip */
    height: 8px; /* set dimensions for the tooltip */
    background-color: #047a4c;
    transform: translateX(50%) translateY(50%) rotate(45deg); 
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    filter: drop-shadow(0px 0 0 white) drop-shadow(0 .5px 0 #CAD5E0);
}

Upvotes: 2

Related Questions