css Треугольникдлятолтипа

Posted 2021-05-13

                            <ul class="contacts__dropdown">
                                <li class="triangle">

                                </li>
                                <li class="contacts__dropdown-item">
                                    <a href="" class="contacts__dropdown-item-a contacts__dropdown-item-a_mail">[e-mail]</a>
                                </li>
                                <li class="contacts__dropdown-item">
                                    <a href="" class="contacts__dropdown-item-a contacts__dropdown-item-a_tel">[phone]</a>
                                </li>
                                <li class="contacts__dropdown-item">
                                    <a href="" class="contacts__dropdown-item-a contacts__dropdown-item-a_skype">serking</a>
                                </li>
                            </ul>

.contacts__dropdown {
    display: block;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #dedede;
    @include fira(light);
    font-size: 18px;
    text-align: left;
    position: absolute;
    left: 55.32%;
    top: 93.75%;
}
.triangle {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top: 0;
    border-bottom-color: #dedede;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -20px;

    &::after {
        content: "";
        display: block;
        border: 20px solid transparent;
        border-top: 0;
        border-bottom-color: white;
        position: absolute;
        top: 1px;
        left: -20px;
    }
}