2

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

1
  • Да, например :before :after Commented 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
    Commented 2 дек. 2017 в 21:02
  • Я сказал же, как вариант. А так префиксы рулят ) caniuse.com/#search=clip-path Commented 2 дек. 2017 в 21:04
  • IE/Edge они не помогут...
    – Qwertiy
    Commented 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
    Commented 2 дек. 2017 в 21:00
  • @Qwertiy я чет только прочитал, что скос надо при ховере оказвца) Commented 2 дек. 2017 в 21:09
  • Да без разницы же. У меня даже margin есть, чтоб ничего не поллзало :)
    – Qwertiy
    Commented 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 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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