Возможно ли в CSS сделать так, чтобы при ховере на пункты меню фон был не прямоугольный, а скошенный справа?
5 ответов
Можно clip-path
использовать как вариант
body{
padding: 0;
margin: 0;
background: skyblue;
}
ul{
list-style: none;
}
li{
width: 200px;
position: relative;
clip-path: polygon(0 1%, 100% 0, 90% 100%, 0% 100%);
cursor: pointer;
}
li:hover{
background: white;
}
<ul>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ul>
-
1
-
Я сказал же, как вариант. А так префиксы рулят ) caniuse.com/#search=clip-path Commented 2 дек. 2017 в 21:04
-
через :after
делает треугольник. Угол треугольника регулируется за счет border-top
и border-right
. И подгоняется параметр right
.test {
position: relative;
width: 150px;
height: 50px;
background: #002b55;
margin-bottom: 10px;
color: white;
}
.test:after {
content: '';
width: 0px;
height: 0px;
position: absolute;
right: -50px;
}
.test span {
display: inline-block;
margin-left: 50px;
margin-top: 10px;
font-size: 20px;
}
.test:hover {
width: 100px;
background: #224d77;
}
.test:hover:after {
border-top: 50px solid #224d77;
border-right: 50px solid transparent;
}
<div class="test"><span>Test1</span></div>
<div class="test"><span>Test2</span></div>
<div class="test"><span>Test3</span></div>
<div class="test"><span>Test4</span></div>
Еще примеры фигур https://css-tricks.com/examples/ShapesOfCSS/
-
-
@Qwertiy я чет только прочитал, что скос надо при ховере оказвца) Commented 2 дек. 2017 в 21:09
-
Да без разницы же. У меня даже margin есть, чтоб ничего не поллзало :)– Qwertiy ♦Commented 2 дек. 2017 в 21:15
Transform - Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
SkewX - Наклоняет элемент на заданный угол по вертикали.
:Before - Псевдоэлемент применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content
.
a {
color: black;
padding: 3px;
position:relative;
}
ul{
list-style:none;
}
li {
padding: 5px;
}
a:hover{
background: #075d9f;
color:white;
}
a:hover:before {
top: 0;
right: -8px;
padding: 0.1px;
-webkit-transform: skewX(-11deg);
-ms-transform: skewX(-11deg);
transform: skewX(-11deg);
width: 100%;
height: 100%;
background: #075d9f;
z-index: -1;
content: "";
display: block;
position: absolute;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
h1 span {
display: inline-block;
position: relative;
background: silver;
line-height: 1.25em;
padding: 0 .25em;
margin-right: .625em;
}
h1:hover span::after { /* или span:hover::after по необходимости */
content: "";
position: absolute;
left: 100%;
border-style: solid;
border-width: 1.25em .625em 0 0;
border-color: silver transparent transparent transparent;
}
<h1><span>Заголовок</span></h1>
Братцы, у вас слишком много кода.
span {
display: inline-block;
padding: 8px 24px 8px 24px;
color: white;
background-image: linear-gradient(darkblue, darkblue);
}
span:hover {
background-image: linear-gradient(110deg, darkblue 86%, transparent 86%);
}
<span>тест</span>
-
зато у нас треугольники с чёткой гипотенузой , а не понадкусанной :D Commented 3 дек. 2017 в 11:49
-
@АлексейШиманский а вы выкиньте свой хром в топку, он нормально градиенты не умеет рендерить. ))) Commented 3 дек. 2017 в 12:45
-
Проблема в том, что такое плохое отображение будет в хроме,опере,яндекс браузере,IE,Edge - а это почти 80% всего интернета.(в safari и Android Browser я не смотрел). FF - используют ~ 7% (хотя там слегка тоже подхрамывает). Предлагаете 80% пользователям сменить браузер? ну-ну) Commented 3 дек. 2017 в 13:07
-
@АлексейШиманский я там смайлы поставил, это было для вас... а в принципе я бы предложил разработчикам webkit обратить внимание на проблему. Commented 3 дек. 2017 в 13:22