Добрый вечер. у меня на сайте есть модуль нижнее меню. и один центральный пунк содержит аватар картинку, выступающий вверх и обрезается формой самого меню. Я отбросил все варианты с z-index , не об этом. я создал форму svg и решил этой формой обрезать фон меню. И получилось , но на разных устройствах предпологалось масштабировать svg по ширене экрана 100vw. Вот мой файл модуля на twig:
<html>
<style>
body {
background-color: #343434 !important;
}
div{
display: block;
}
.bottom-menu-336 {
border-color: rgba(0, 0, 0, 1);
background: rgba(27, 28, 29, 1);
background-color: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 1px 1px 2px rgb(0 0 0);
}
.bottom-menu > ul > li > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 0 10px;
min-width: 50px;
-webkit-transition: all 0.075s ease-out;
transition: all 0.075s ease-out;
position: relative;
}
.bottom-menu > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
ul {
margin-top: 0;
margin-bottom: 10px;
}
.bottom-menu > ul > li {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.bottom-menu ul, .bottom-menu li {
margin-top: -25px;
padding: 0;
list-style: none;
}
.bottom-menu>ul>li>a {
flex-direction: column;
}
.bottom-menu-336>ul>li>a {
height: 50px;
min-width: 50px;
font-size: 9px;
color: rgba(220, 200, 150, 1);
text-decoration: none;
margin-bottom: 5px;
}
.bottom-menu-336 .bottom-menu-item-5>a::before {
content: '\ead8' !important;
font-family: icomoon !important;
font-size: 34px;
color: rgba(220, 200, 150, 1);
top: -15px;
}
.bottom-menu > ul > li > a::before {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1.1;
margin: 2px 0;
}
.m_avatar {
position: fixed;
bottom: 36px;
margin: 0px;
border-radius: 19px;
padding: 0;
width: 38px;
height: 38px;
}
.bottom-menu {
clip-path: url('#shape');
}
.bottom-menu {
position: fixed;
bottom: 0;
left:0;
z-index: 100;
overflow-x: auto;
height: 82px;
width: 100vw; }
.bottom-menu .menu-item.bottom-menu-item-6.active .links-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 5px;
}
</style>
<body>
<div class="bottom-menu bottom-menu-336">
<svg class="svg" width="100vw" height="82px" viewBox="0 0 100vw 82">
<clipPath id="shape">
<path fill="black" fill-opacity="0.549020" d="M0 81.99l0 -54.18 457.77 0c6.94,-0.23 11.28,-1.66 13.74,-8.95 8.53,-25.15 48.45,-25.15 56.98,0 2.46,7.29 6.8,8.72 13.74,8.95l457.77 0 0 54.18 -1000 0z"></path>
</clipPath>
</svg>
<ul>
<li class="menu-item bottom-menu-item bottom-menu-item-3">
<a href="https://"><span class="links-text">Заказы</span></a>
</li>
<li class="menu-item bottom-menu-item bottom-menu-item-4">
<a href="https://#.#/#"><span class="links-text">Избраное</span></a>
</li>
<li class="menu-item bottom-menu-item bottom-menu-item-6 active">
<a href="https://#.#/#"><span class="links-text"><img src="https://i.pinimg.com/originals/c3/02/04/c30204f957f4fe37edbab59c0942444e.jpg" class="m_avatar"><br><s>день добрый
</s>user</span></a>
</li>
<li class="menu-item bottom-menu-item bottom-menu-item-7">
<a href="https://#.#/#"><span class="links-text">Contact</span></a>
</li>
<li class="menu-item bottom-menu-item bottom-menu-item-8">
<a href="https://#.#/#"><span class="links-text">Выход</span></a>
</li>
</ul>
</div>
</body>
</html>
принскрины с эмуляции разных устройств и их положения:
Но этот метод не работает, помогите может есть другой путь масштабирования?
Средний
