scss CSS arrow #css #scss

Posted 2021-05-17

i {
    width: 0;
    height: 0;
    &.right {
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid;
      }
    &.left {
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid;
      }
    &.up {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid;
    }
    &.down {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid;
    }
}

i {
    width: 0;
    height: 0;;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
}