Стрелка при наведении

255
16 августа 2018, 11:20

Здравствуйте? Каким методом реализуется подобное? При наведении должна появляться стрелка в виде треугольника как на скриншоте?

Answer 1

Как вариант:

body{ 
  text-align: center; 
} 
 
div{ 
  display: inline-block; 
} 
 
.menu-item{ 
  position: relative; 
  height: 120px; 
  width: 150px; 
  margin: 10px; 
  cursor: pointer; 
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 60% 90%, 40% 90%, 0 90%); 
  clip-path: polygon(0 0, 100% 0, 100% 90%, 60% 90%, 40% 90%, 0 90%); 
} 
 
.menu-item:first-child{ 
  background: rgba(169,3,41,1); 
} 
 
.menu-item:nth-child(2){ 
  background: rgba(0,123,247,1); 
} 
 
.menu-item:last-child{ 
  background: rgba(117,168,0,1); 
} 
 
.menu-item:hover{ 
  display:inline-block; 
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 60% 90%, 51% 100%, 40% 90%, 0 90%); 
  clip-path: polygon(0 0, 100% 0, 100% 90%, 60% 90%, 51% 100%, 40% 90%, 0 90%);   
} 
 
.menu-item:first-child:hover{ 
  background: rgb(109,0,25); 
  background: -webkit-linear-gradient(45deg, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 31%,rgba(169,3,41,1) 100%); 
  background: -o-linear-gradient(45deg, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 31%,rgba(169,3,41,1) 100%); 
  background: linear-gradient(45deg, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 31%,rgba(169,3,41,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=1 ); 
} 
 
.menu-item:nth-child(2):hover{ 
  background: rgb(0,60,107); 
  background: -webkit-linear-gradient(45deg, rgba(0,60,107,1) 0%,rgba(3,98,170,1) 30%,rgba(0,123,247,1) 100%); 
  background: -o-linear-gradient(45deg, rgba(0,60,107,1) 0%,rgba(3,98,170,1) 30%,rgba(0,123,247,1) 100%); 
  background: linear-gradient(45deg, rgba(0,60,107,1) 0%,rgba(3,98,170,1) 30%,rgba(0,123,247,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003c6b', endColorstr='#007bf7',GradientType=1 ); 
} 
 
.menu-item:last-child:hover{ 
  background: rgb(39,66,0); 
  background: -moz-linear-gradient(45deg, rgba(39,66,0,1) 0%, rgba(66,140,2,1) 38%, rgba(117,168,0,1) 100%); 
  background: -webkit-linear-gradient(45deg, rgba(39,66,0,1) 0%,rgba(66,140,2,1) 38%,rgba(117,168,0,1) 100%); 
  background: linear-gradient(45deg, rgba(39,66,0,1) 0%,rgba(66,140,2,1) 38%,rgba(117,168,0,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#274200', endColorstr='#75a800',GradientType=1 ); 
}
<div class="menu-wrapper"> 
  <div class="menu-item"></div> 
  <div class="menu-item"></div> 
  <div class="menu-item"></div> 
</div>

READ ALSO
z-index, убрать блоки под родителя

z-index, убрать блоки под родителя

как убрать блоки линий за серый фон снизу, если этот фон для них родитель, а блоки с отрицательным margin? Пробовал z-index, не получаетсяТ

198
Вызов метода подменой контекста

Вызов метода подменой контекста

Если я хочу вызвать функцию из прототипа массивов, например forEach, для коллекции, допустим NodeList, то какой вариант лучше избрать?

176
Доступность инпута типа чекбокс

Доступность инпута типа чекбокс

На форме есть несколько инпутов типа чекбоксПеремещаться ТАБом по элементам формы я могу

192
Как исключить компонент из сборки в коде в зависимости от условия?

Как исключить компонент из сборки в коде в зависимости от условия?

Как исключить компонент из сборки в коде в зависимости от условия (компонент должен быть только если NODE_ENV = development), без правок конфига вебпака?

180