2

Возможно ли в CSS сделать так, чтобы при ховере на пункты меню фон был не прямоугольный, а скошенный справа? введите сюда описание изображения

1
  • Да, например :before :after 2 дек 2017 в 20:46

5 ответов 5

4

Можно 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>

3
  • 1
    Интересный вариант, но кроссбраузерность так себе.
    – Qwertiy
    2 дек 2017 в 21:02
  • Я сказал же, как вариант. А так префиксы рулят ) caniuse.com/#search=clip-path 2 дек 2017 в 21:04
  • IE/Edge они не помогут...
    – Qwertiy
    2 дек 2017 в 21:15
3

через :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/

3
  • Ты первый, но у меня немного по-другому))
    – Qwertiy
    2 дек 2017 в 21:00
  • @Qwertiy я чет только прочитал, что скос надо при ховере оказвца) 2 дек 2017 в 21:09
  • Да без разницы же. У меня даже margin есть, чтоб ничего не поллзало :)
    – Qwertiy
    2 дек 2017 в 21:15
2

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>

2

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>

2

Братцы, у вас слишком много кода.

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>

4
  • зато у нас треугольники с чёткой гипотенузой , а не понадкусанной :D 3 дек 2017 в 11:49
  • @АлексейШиманский а вы выкиньте свой хром в топку, он нормально градиенты не умеет рендерить. ))) 3 дек 2017 в 12:45
  • Проблема в том, что такое плохое отображение будет в хроме,опере,яндекс браузере,IE,Edge - а это почти 80% всего интернета.(в safari и Android Browser я не смотрел). FF - используют ~ 7% (хотя там слегка тоже подхрамывает). Предлагаете 80% пользователям сменить браузер? ну-ну) 3 дек 2017 в 13:07
  • @АлексейШиманский я там смайлы поставил, это было для вас... а в принципе я бы предложил разработчикам webkit обратить внимание на проблему. 3 дек 2017 в 13:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.