Как мне получить внешнюю кривую для активного элемента боковой панели, используя чистый CSS - PullRequest
Новая
       49

Как мне получить внешнюю кривую для активного элемента боковой панели, используя чистый CSS

0 голосов
/ 24 сентября 2019

Я изучал дизайны внешнего интерфейса на прошлой неделе, и я пытался воспроизвести дизайн, который я видел на капле, но мне было трудно воспроизвести активный стиль на боковой панели, вызвавшей внешнюю кривую.

Я был бы рад, если бы кто-нибудь смог мне помочь с тем, как этого можно достичь.

Мне удалось достичь других вещей, кроме внешних кривых на активном элементе боковой панели.

Я не могу опубликовать фотографию, потому что моя репутация меньше 10, поэтому я добавил ссылку на дизайн

https://cdn.dribbble.com/users/1192538/screenshots/6973301/flight_web1.png

Ответы [ 2 ]

2 голосов
/ 24 сентября 2019

Хитрая часть - это «перевернутые» углы справа.Эту проблему можно решить с помощью радиально-градиентного фона в элементах: before и: after.

Радиальный градиент обычно используется для постепенного перехода от одного цвета к другому.Однако мы можем манипулировать им таким образом, чтобы в этом случае у нас была «острая» линия между белым и синим.Для этого вы должны убедиться, что значение px для синего и белого очень близко друг к другу.

background: radial-gradient(circle at top left, blue 10px, white 11px);

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

.menu{
  list-style-type: none;
  background: blue;
  width: 200px;
  border-radius: 20px;
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}

.menu li:hover{
  background: white; 
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 10px; 
  height: 10px;
  right: 0px;
}

.menu li:hover:after{
  top: -10px;
  background: radial-gradient(circle at top left, blue 10px, white 11px);
}

.menu li:hover:before{
  bottom: -10px;
  background: radial-gradient(circle at bottom left, blue 10px, white 11px);
}
Hover over menu items to see the effect
<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
0 голосов
/ 24 сентября 2019

Альтернатива, которую я быстро нашел для вас, заключается в создании белого квадрата, подобного .hover-top-white, в моем коде и добавлении четверти окружности div с тем же цветом фона над белым для имитации кривой.Смотрите код: 

.menu {
	background-color: purple;
	width: 400px;
	height: 100vh;
	border-radius: 0 50px 50px 0;
	position: relative;
}
.hover {
	width: 350px;
	height: 100px;
	position: absolute;
	right: 0;
	top: 120px;
	display: flex;
	justify-content: flex-end;
}
.hover-top-cut {
	width: 50px;
	height: 50px;
	background-color: purple;
	border-radius: 0 0 50px;
	position: absolute;
	top: -50px;
	rihgt: 0;
	z-index: 3;
}
.hover-top-white {
	width: 50px;
	height: 50px;
	background-color: white;
	position: absolute;
	top: -50px;
	rihgt: 0;
}
.hover-mid {
	width: 100%;
	height: 60%;
	background-color: white;
	border-radius: 50px 0 0 50px;
}
.hover-bottom-cut {
	width: 50px;
	height: 50px;
	background-color: purple;
	border-radius: 0 50px 0 0;
	position: absolute;
	bottom: -10px;
	rihgt: 0;
	z-index: 3;
}
.hover-bottom-white {
	width: 50px;
	height: 50px;
	background-color: white;
	position: absolute;
	bottom: -10px;
	rihgt: 0;
}
<div class="menu">
	<div class="hover">
		<div class="hover-top-cut"></div>
		<div class="hover-top-white"></div>
		<div class="hover-mid"></div>
		<div class="hover-bottom-cut"></div>
		<div class="hover-bottom-white"></div>
	</div>
</div>

Конечно, вы можете использовать несколько различных способов выравнивания вместо flexbox и абсолютного положения.Но я сосредоточился только на его кривой.

...