Dropdown menu có mũi nhọn - Dropdown Arrow - CSS or SCSS

Dropdown menu

Dropdown Arrow - CSS

Bootstrap

//
// With CSS
//
.dropdown-menu {
    display: none;
    background: #FFF;
}
.dropdown-menu:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    z-index: 1;
    top: -7px;
    right: 9px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
}
.dropdown-menu:before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    z-index: 1;
    top: -9px;
    right: 8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ccc;
}

Dropdown Arrow - SCSS

Bootstrap

//
// With SCSS
//
.dropdown-menu {
  display: none;
  background: $white;
  &:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    z-index: 1;
    top: -7px;
    right: 9px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
  }
  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    z-index: 1;
    top: -9px;
    right: 8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ccc;
  }
}