Радиус не адаптируется в панели навигации - PullRequest
Новая
       6

Радиус не адаптируется в панели навигации

0 голосов
/ 21 июня 2019

Я работаю на мобильной нижней панели навигации.Вот код, который я разработал: 

body {
  background-color: #ff0000;
}

.mobile_bottombar {
		display: flex;
		align-items: center;
		position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 60px;
	  padding: 0 12px;
		background-color: #fff;
	  z-index: 999;
	}

	.des:before {  /* creates the circle */
		position: absolute;
		content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z'/></svg>");
  	width: 66px;
  	height: 66px;
  	top: -45px;
  	left: calc(50% - 33px);
  	border-radius: 50%;
    background-color: #188071;
    justify-content: center;
    align-items: center;
    display: flex;
	}

	.des {
  	border-radius: 6px;
  	background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);
	}
<div class="mobile_bottombar des">
    <div class="bottombar_item" onclick="switchPage(2, 'main', true)">
      <div>
        <span>Sepp</span>
      </div>
    </div>

    <div style="margin-right: 20px;" class="bottombar_item" onclick="switchPage(3, 'noteslist', true)">
      <div>
        <span>Depp</span>
      </div>
    </div>

    <div style="margin-left: 20px;" class="bottombar_item">
      <div>
        <span>Mepp</span>
      </div>
    </div>

    <div class="bottombar_item" onclick="switchPage(4, 'permission', true)">
      <div>
        <span>Repp</span>
      </div>
    </div>
  </div>

Моя проблема в том, что радиус, который вырезается из div, является другим радиусом, чем синий круг.Или, может быть, есть другая проблема, которую я не знаю?Во всяком случае, это выглядит очень уставшим из-за разного пространства вокруг круга.Но как это исправить?
~ marcelo

1 Ответ

1 голос
/ 21 июня 2019

Вы можете попробовать комментарий @ Temani или, если хотите придерживаться своего метода, продолжить чтение.

Я думаю, что нет относительного способа сделать это, поэтому все, что вы можете сделать, это жестко изменить значениерадиального градиента в правиле .des следующим образом: 

background: radial-gradient(40px 40px at 50% -11px, rgba(0, 0, 0, 0) 38.5px, #fff);

Я также советую вам удалить box-shadow и заменить его на 

filter: drop-shadow(0px -2px 1px black);

, потому что мыможно увидеть тень, пересекающую прозрачную область.

...