Здравствуйте? Каким методом реализуется подобное? При наведении должна появляться стрелка в виде треугольника как на скриншоте?
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>
-
Спасибо, подскажите ещё пожалуйста как сделать такую внутреннюю тень? чтобы она падала на блок и на стрелку– SimaDmtr2 июл 2018 в 10:42
-
@Daniel Deffo MortanPlay поправил ответ. Долго игрался с тенью треугольнику. Так чтобы выглядело правдоподобно. Вариант, что предоставил выше - меньше кода, выглядит лучше. Но кроссбраузерность пострадала. Хром, Опера, Мозила - норм. Про IE забудьте. Safari под вопросом.– user2103222 июл 2018 в 12:25
-