CSS - ARROWS (Example) V.1

 === CSS - ARROWS (Example) V.1 = POSTé ===

============================
======== BIG LEFT ARROW - from : MOZILLA ADDON - [1] - DEV(newE) - ALL LIST (Add to Collection) v6 -(installButton)

/* (newE) ADD TO COLLECTION - POPUP LEFT ARROW - (WHITE INNER ARROW) - === */
#add-to-collection.install-note:after,
#add-to-collection.popup:after {
    transform: rotate(-90deg) !important;
    left: -48px !important;
    top: 123px !important;
    border-color: transparent transparent #FFFFFF !important;
    border-width: 24px !important;
/*   outline: 1px solid red ! important;*/
}
#add-to-collection.install-note:before,
#add-to-collection.popup:before {
    border-width: 28px !important;
    left: -56px !important;
    top: 119px !important;
    transform: rotate(-90deg) !important;

}


============================
======== EXAMPLE - ARROW BORDER + LOZANGE + ROTATE
== https://addons.mozilla.org/fr/firefox/collections/decembre/favorites/
/* (new44) TOP HEADER - MENU TOP - MENUS on HOVER - TOP ARROWS - === */
.menu-nav > ul > li > ul::after {
    content: "";
/* box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.1); */
    box-shadow: -2px -2px 2px red !important;
    position: absolute;
    display: block;
    height: 12px;
    width: 12px;
    top: -6px;
    transform: rotate(45deg);
    z-index: 1;
    background-color: #333 !important;
/* background-color: blue !important; */
}