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

159
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, не получаетсяТ

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

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

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

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

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

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

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

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

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

148