Выравнивание CSS преобразований

Question

, поэтому я заново изучаю html / css и ASP. NET MVC, и у меня возникли проблемы с добавлением последних штрихов на панели навигации. Следующее создает боковую навигационную панель, которая трансформируется при наведении курсора:

html:

<div class="menu">
    <div class="nav-arrow"></div>
    <nav>
        <ul class="nav-list">
            <li class="nav-item">@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="nav-item">@Html.ActionLink("About", "About", "Home")</li>
            <li class="nav-item">@Html.ActionLink("Services", "Index", "Services")</li>
            <li class="nav-item">@Html.ActionLink("Contact", "Index", "Contact")</li>
        </ul>
    </nav>
</div>

css:

.menu {
    position: fixed;
    height: 100vh;
    background-color: pink;
    width: 7vw;
    box-shadow: 1px 0 2px rgba(0,0,0,.2);
    transition: 1s;}

.menu:hover {
    width: 40vw;
}

.menu:hover ~ .container {
    transform: perspective(80vw) rotateY(10deg) translateX(35vw) scaleY(1.2);
}

.menu:hover nav {
    left: 20%;
}

nav {
    position: absolute;
    margin-top: 50%;
    left: -1000px;
    transition: .5s;
}

.nav-arrow {
    position: absolute;
    margin-top: 50vh;
    margin-left: 30%;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 0;
    height: 0;
    border-right: 35px solid #569cbd;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.nav-list {
    color: black;
    text-transform: uppercase;
    list-style-type: none;
}

.nav-item {
    line-height: 3em;
    letter-spacing: .3em;
}

a {
    margin-top: 0;
    font-size: 30px;
    text-decoration: none;
    color: black;
    font-weight: 600;
}

Я не знаю, Я слишком долго смотрел на него или что-то в этом роде, но я не могу заставить .nav-arrow согласоваться с преобразованием меню. Спасибо за любой совет!

Answer 1

Думаю, добавление right: 48px; (или аналогичного) к .nav-arrow делает работу

Answer 2

Не уверен, что я полностью понимаю, что вы пытаетесь сделать, но если вы хотите, чтобы .nav-arrow оставался выровненным по правому краю при открытии розовой строки меню, обновите код .nav-arrow, чтобы использовать right: 0 вместо поля, как показано ниже :

.nav-arrow {
    position: absolute;
    right: 0;
    margin-top: 50vh;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 0;
    height: 0;
    border-right: 35px solid #569cbd;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.menu {
    position: fixed;
    height: 100vh;
    background-color: pink;
    width: 7vw;
    box-shadow: 1px 0 2px rgba(0,0,0,.2);
    transition: 1s;}

.menu:hover {
    width: 40vw;
}

.menu:hover ~ .container {
    transform: perspective(80vw) rotateY(10deg) translateX(35vw) scaleY(1.2);
}

.menu:hover nav {
    left: 20%;
}

nav {
    position: absolute;
    margin-top: 50%;
    left: -1000px;
    transition: .5s;
}

.nav-arrow {
    position: absolute;
    right: 0;
    margin-top: 50vh;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 0;
    height: 0;
    border-right: 35px solid #569cbd;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.nav-list {
    color: black;
    text-transform: uppercase;
    list-style-type: none;
}

.nav-item {
    line-height: 3em;
    letter-spacing: .3em;
}

a {
    margin-top: 0;
    font-size: 30px;
    text-decoration: none;
    color: black;
    font-weight: 600;
}

<div class="menu">
    <div class="nav-arrow"></div>
    <nav>
        <ul class="nav-list">
            <li class="nav-item">Home</li>
            <li class="nav-item">About</li>
            <li class="nav-item">Services</li>
            <li class="nav-item">Contact</li>
        </ul>
    </nav>
</div>